动态生成的等宽选项卡项

Question

我正在创建的标签，需要在宽度相等，它将动态到来(2-8个标签)。没有固定的宽度，选项卡条有流畅的宽度。我曾试图通过css来实现它，但没有成功。

演示：http://codepen.io/anon/pen/JdbMwR

<div class="main">
<ul class="list-inline sub-cat-tabs">
  <li>
    <div>
      <a href="javascript:void(0)" class="active"><span>2014-2015 2014-2015</span></a>
    </div>
  </li>
  <li>
    <div>
      <a href="javascript:void(0)" class=""><span>2015-2015</span></a> 
    </div>
  </li>
</ul>
</div>

Answer 1

你可以用CSS固定的表格布局，浏览器支持: IE8+

http://jsfiddle.net/gashvbp6/

​

.tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.tabs li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
}

<ul class="tabs">
    <li>item - long one</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

​