DEMO:http://www.tinghaige.com/demo/uncertain-nav/
代码:
HTML代码segmentfault
<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代码:spa
.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):code
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
来隐藏最左侧标签的左边框。get