当宽度和数量未知时，如何使用CSS均匀分布菜单项？

我读过很多关于使用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>

选项卡1
选项卡2
选项卡3
选项卡4

因此，即使在元素数量和宽度是动态的情况下使用css进行分发，也可以做到吗

---

看起来这是一件显而易见的事情-该死的CSS

为此，可以使用CSS

display:table cell

属性。写下：

.tabs {
  display: table;
  width: 300px;
  border: 1px solid green;
}

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

---

选中此项。

这里有一个解决方案，使用flexbox，当内容溢出分配的单元格宽度时，可以保持均匀的宽度：

ul.tabs{
显示器：flex；
柔性包装：nowrap；
对齐项目：拉伸；
列表样式类型：无；
保证金：0；
填充：0；
}
ul.tabs>li.tab{
弹性：1；
文本对齐：居中；
/*只是增加了标签的可视性*/
边框：1px实心rgba（0,0,0,12）；
填充：10px；
}

选项卡1
选项卡2
选项卡3。这是一个很长的选项卡，应该会溢出
选项卡4

谢谢！！在IE 7中不起作用，但谁在乎呢，我厌倦了为过时的IE版本修修补补。太棒了。还有一点需要注意的是，如果有人发现它，可以删除

元素上的任何浮动。我现在想重新讨论一下，是否有人有不同的方法来实现相同的功能而不使用display:table cell？下拉菜单和css转换的效果不太好。@Ralphonz:添加了一个答案，创建了真正大小相等的列。上述解决方案取决于内容长度是否相等。