不肯定欄目數量的（多行）導航欄居中

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來隱藏最左側標籤的左邊框。