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

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