红河州领先的互联网服务提供商
以技术为后盾 以服务求发展
首页 >> 知识宝库 >> 网页设计 >> 信息内容

实现不定个数和宽度的块状浮动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小时·极速响应