DEMO:http://www.tinghaige.com/demo/uncertain-nav/
代码:
HTML代码
<div class="wrap">
<div class="nav">
<ul class="nav_list clearfix"><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test
</li><li>Test</li>
</ul>
</div>
</div>
注:使用这种诡异的结构是为了消除inline-block的间距。
CSS代码:
.nav {
width: 800px;
margin: 0 auto;
background: #fff;
padding: 10px;
border: 1px solid #000;
}
.nav_list {
overflow: hidden;
margin: 0 auto;
height: auto;
text-align: center;
}
.nav_list li {
display: inline-block;
border-left: 1px solid #000;
width: 100px;
background: #fff;
text-align: center;
margin-left: -1px; //隐藏最左侧元素的左边框
margin-bottom: 5px;
}
JS代码(Jquery):
var width_outer = $(".nav").width(); //导航最外层宽度
var width_item = $(".nav_list li").width(); //每个栏目名称(<li>)的宽度
var count = $(".nav_list li").length; //栏目数量
var num = width_outer / width_item; //每行最大数量(可以按需调整)
if(count < num) {
$(".nav_list").width(count * width_item) //根据栏目数量和宽度设置`<ul>`的宽度
} else {
count = num;
$(".nav_list").width(count * width_item)
}
确定了<ul>
的宽度,可以使用margin:0 auto
来实现整个<ul>
的居中,在CSS中使用负边距margin-left:-1px
来隐藏最左侧标签的左边框。