国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發(fā) > CSS > 正文

css 跨瀏覽器實現(xiàn)float:center

2020-10-23 18:32:50
字體:
供稿:網(wǎng)友
復制代碼 代碼如下:

<div id="macji">
<ul class="macji-skin">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>

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

這里我們得先重溫一下position:relative,它將依據(jù)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;
}
發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 建昌县| 肥东县| 拉萨市| 壶关县| 武鸣县| 景德镇市| 仙游县| 永丰县| 台湾省| 晋城| 奉贤区| 新干县| 福安市| 沿河| 夏河县| 香河县| 景泰县| 温宿县| 团风县| 澳门| 通州市| 蓬安县| 聂拉木县| 英山县| 开阳县| 库车县| 甘德县| 东港市| 全南县| 沅陵县| 禹州市| 北川| 马山县| 大田县| 靖远县| 民县| 榕江县| 亳州市| 冷水江市| 元江| 邯郸市|