如何均匀分布与CSS菜单项时，宽度和数量是不知道？(How to evenly distribute

我用css阅读均匀分布的元素很多，但每一个解决方案，我已经找到了需要你了解和定义的宽度和/或元素的数量正在分发。

我有一个容器，该容器是一个固定的宽度的 - 内这里可以是任意数量的需要被整个父元素均匀分布的由左到右的自动宽度的li元素的。

这里是我的标记 - 除了可能存在的任何数量的与他们的任何长度的文本标签。

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

所以，即使是用CSS分布在元素和宽度的数量是动态的 - 能不能做到？

好像这样一个明显的事情要做 - 该死的CSS！

Answer 1:

对于此您可以CSS display:table-cell属性。 像这样写：

.tabs{
    display:table;
    width:300px;
    border:1px solid green;
}
.tabs li{
    display:table-cell;
    border:1px solid red;
    height:40px;
}

勾选此http://jsfiddle.net/px7Uf/

Answer 2:

这里是保持甚至宽度当内容溢出分配单元宽度，使用Flexbox的一个解决方案：

 ul.tabs { display: flex; flex-wrap: nowrap; align-items: stretch; list-style-type: none; margin: 0; padding: 0; } ul.tabs>li.tab { flex: 1; text-align: center; /* just adding visibility to the tabs */ border: 1px solid rgba(0,0,0,.12); padding: 10px; } 

 <ul class="tabs"> <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li> <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li> <li class="tab " id="tab-3"><span class="tab-title">Tab 3. This is a very long tab and should overflow...</span></li> <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li> </ul> 

文章来源: How to evenly distribute menu items with CSS when width and quantity is not known?