在網頁布局中經常需要將一組元素并排顯示,而HTML中的li標簽和CSS中的float屬性恰好能實現這個效果。
<ul> <li>元素1</li> <li>元素2</li> <li>元素3</li> </ul>
如上代碼所示,我們使用ul和li標簽來實現一組元素的列表。但是默認情況下每個元素都是垂直排列的,如果我們想要讓它們并排顯示,我們可以使用CSS中的float屬性。
li { float: left; }
如上代碼所示,我們給li標簽設定了float:left屬性,這樣每個li元素就會“漂浮”并排顯示。但是需要注意的是,使用float屬性時需要注意清除浮動,否則會出現布局混亂的問題。
<div class="clearfix"></div> .clearfix:after { content: ""; display: block; clear: both; }
如上代碼所示,我們可以在浮動元素的容器里加一個空的div,并給它設定一個clearfix的class。然后通過:after偽元素和clear:both屬性來清除浮動的影響。
上一篇css3圖片邊框模糊效果
下一篇css3圖片鼠標滑過動態