首頁 > web前端 > css教學 > 主體

如何解決css中float:right右對齊元素會換行不在同一條線上

不言
發布: 2018-06-21 17:35:23
原創
3094 人瀏覽過

這篇文章主要介紹了關於如何解決css中float:right右對齊元素會換行不在同一條線上,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

使用float設定右對齊顯示的時候,我們通常會遇到,右對齊的元素會換行,這樣就會出現左右元素不在同一條線上,下面為大家介紹下兩種解決方法,有類似情況的朋友可以參考下

CSS中通常我們需要將某元素居左、居右顯示,這個時候我們就可以根據float來設置,在設置右對齊顯示的時候,我們通常會遇到,右對齊的元素會換行,這樣就會出現左右元素不在同一條線上,我們可以用以下方式來解決這個問題: 

第一個解決方法:把左右對換,例如把日期放在標題的前面,對調一下就好了。 

第二個解:給左邊也加上float:left。 

CSS float定義和用法 

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文字圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會產生一個區塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地變窄. 

Float常跟屬性值left、right、none
Float: none 不使用浮動
Float:left 靠左浮動
Float:right 靠右浮動

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何使用css屬性nth-child(n)匹配選擇第n個子元素

##如何解決火狐在用offsetHeight取得div的高度時為0

#

以上是如何解決css中float:right右對齊元素會換行不在同一條線上的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!