不确定栏目数量的（多行）导航栏居中

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来隐藏最左侧标签的左边框。