Equal Width Tab Items Generated Dynamically

Question

I am creating tabs that needs to be equal in width, it will come dynamically (2-8 tabs). There is no fixed width, tab bar has fluid width. I had tried to achieve it through css, but didn't worked.

demo: 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

You could do it with CSS fixed table layout, browser support: 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>