紅河州領先的互聯網服務提供商
以技術為后盾 以服務求發展
首頁 >> 知識寶庫 >> 網頁設計 >> 信息內容

實現不定個數和寬度的塊狀浮動li在容器中居中顯示

    或許您知道浮動居中于容器的方法:可以設置容器text-align:center,然后浮動元素設置display:inline,這樣就能實現。的確,這種方法100%實現了浮動元素的居中。然而浮動元素并不是塊狀顯示的,你會想:那浮動元素設置成display:inline-block那不就行了嗎?這里,我明確告訴您,其他瀏覽器可以,但IE6不行(一個元素排成一行顯示)。那么怎樣實現塊狀浮動居中容器呢,請看下文:

<div id="irkj_box">
 <ul>
   <li><a href="#">欄目一</a></li>
   <li><a href="#" class="active">欄目二</a></li>
   <li><a href="#">欄目三</a></li>
   <li><a href="#">欄目四</a></li>
 </ul>
</div>


#irkj_box { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; }
#irkj_box ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; }
#irkj_box ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; }

 #irkj_box ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; }
 #irkj_box ul li a:hover { background:#369; color:#fff; }
 #irkj_box ul li a.active, #irkj_box ul li a.active:hover { color:#fff; background:#000; }

 

    實現是這樣的(請看如下圖解):利用float后元素寬度是他內部內容寬度,position:relative,偏移量是以百分數是他父類width的一半。

 

簡而言之就是:?

ul{ float: left;

    left: 50%;

    position: relative;

}

li{

    float: left;

    position: relative;

    right: 50%;

}

 

(已被查看 人次)
分享到:

正規網絡公司

專業的系統開發公司

紅河本地化服務

您身邊的網絡服務專家

100%正版授權

全套自主開發授權使用

按需求定制開發

滿足您各種開發需求

完善售后服務

7×24小時·極速響應

亚洲中文无码亚洲人成影院