首頁 > web前端 > css教學 > css 跨瀏覽器實作float:center_經驗交流

css 跨瀏覽器實作float:center_經驗交流

WBOY
發布: 2016-05-16 12:05:14
原創
1527 人瀏覽過
複製代碼 代碼如下:



  • 列表一

  • 列表二

  • 列表三




我們希望實現li是浮動的,並且居中的(li個數不固定,ul寬度未知)。可以設定ul的text-align:center,再設定li的display,可以實現居中,但這樣不是我們的初衷,我們需要實作float:center。

這裡我們得先重溫一下position:relative,它將依據left,right,top,bottom等屬性在正常文件流中偏移位置。那我們可以讓ul為position:relative;left:50%,然後再讓li像左浮動,在讓它position:relative;right:50%(或者left:-50%),那麼li就像向中間浮動一樣居中了。廢話不多說,先試試看。
複製程式碼 程式碼如下:

#macji{
position:relative; width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#macji . macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板