内联列表-有什么方法可以使项目等于最大宽度？

Question

我正在创建一个水平选项卡菜单。

由于选项卡具有响应性，因此我需要应用一些规则：

标签的最大宽度为264px

制表符宽度是文本的宽度+左右24px；

但是（这有点棘手），所有标签的大小必须相同；

如果选项卡式区域的总宽度小于可用宽度（页面容器），则使所有选项卡均等于最大宽度并在该空间内居中。

如果总宽度等于或超过可用宽度（例如移动设备），则制表符将设置为固定宽度（例如3个制表符= 33.33％），并且文本将在必要时自动换行。

我正在尝试为该问题寻求最佳解决方案。

• 我猜想基于表的解决方案会行得通，但是我不确定是否会激怒使用表（如果有人对此有任何建议，将不胜感激）

• 一个JavaScript解决方案？

• Flexbox并不是真正可行的解决方案，因为它没有得到足够广泛的支持。

• 还有其他我可以使所有制表符宽度相等的CSS方法吗？

所有帮助建议表示赞赏。

Answer 1

您会同意，这里的重要事情是贪婪，因此，对于导航和带有float的制表符有简单的解决方案。

 ul{ list-style: none; } li{ width: 100%; } @media only screen and (min-width: 768px) { li{ float: left; //other styles for tabs } } 

 <ul> <li>1<li> <li>2<li> <li>3<li> <li>4<li> <li>5<li> </ul>