li元素右浮動會出現換行
一般情況下想讓塊級元素在一行顯示,可以為元素施加浮動。
但是有時候表現卻並非如人願,會出現換行的情況。
看如下程式碼:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ padding:0; margin:0; } #box{ width:250px; list-style:none; } #box li{ width:100px; height:30px; background-color:green; } </style> </head> <body> <ul id="box"> <li></li> <li style="float:right"></li> </ul> </body> </html>
以上程式碼中,儘管右邊的li採用了右浮動,但是還是出現了換行現象,下面就介紹一下解決方案:
解決方案:
在左邊的li元素也採用浮動,程式碼修改如下:
[HTML] 純文字檢視 複製程式碼<ul id="box"> <li style="float:left"></li> <li style="float:right"></li> </ul>
相關文章
- 如果讓浮動div後面的元素換行顯示
- JavaScript動態新增li元素JavaScript
- css li元素中的文字超出隱藏不換行效果CSS
- 浮動元素水平居中
- 絕對定位元素、浮動元素會生成一個塊級框
- 行內元素和塊級元素使用浮動後的變化
- js實現的在li元素列表的任意位置插入一個新的li元素JS
- 將每個元素替換為右側最大元素
- jquery獲取指定li元素後面的第n個li元素jQuery
- 浮動流元素排列規則
- JavaScript設定元素float浮動JavaScript
- float浮動元素不會有margin外邊距合併效果
- css匹配指定行li元素程式碼例項CSS
- jquery動態新增li元素程式碼例項jQuery
- JavaScript 插入新li元素JavaScript
- removeChild()刪除li元素REM
- jquery如何在li元素列表的開頭新增一個新li元素jQuery
- 運用li元素進行斑馬色顯示
- jQuery寫的文章內容頁右側浮動滾動jQuery
- 如何利用jquery在任意指定li元素後面插入新的li元素jQuery
- 獲取ul元素下的所有li元素
- 行內元素與塊狀元素 行內替換元素與行內非替換元素的區別
- ul最後插入li元素
- jQuery複製指定li元素jQuery
- jQuery刪除指定li元素jQuery
- CSS浮動元素特點有什麼CSS
- 浮動元素容器的clearing問題
- 使用removeChild()函式動態刪除一個li元素REM函式
- 彈性效果網頁右側浮動框詳解網頁
- 獲取div元素下li元素的數目
- jQuery獲取li元素後面所有兄弟元素jQuery
- 為什麼float:right的元素會發生換行
- CSS如何居中一個float浮動元素?CSS
- CSS圍住浮動元素的三種方法CSS
- CSS 文字li元素中垂直居中CSS
- jQuery調整li元素順序jQuery
- jQuery 刪除當前li元素jQuery
- JavaScript 刪除指定的li元素JavaScript