動態生成的等寬選項卡項目

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>