Html CSS动态水平导航菜单，用于填充特定宽度（表格行为）

我需要创建一个水平导航菜单，其中包含不断变化的项目数（这很重要，我无法将宽度硬编码到CSS中，我不想用JS计算），这些项目的宽度可以达到一定的宽度，比如说800px

有桌子

<table width="800" cellspacing="0" cellpadding="0">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five Seven</td>
  </tr>
</table>

<style>
table td {
      padding: 5px 0;
      margin: 0;
      background: #fdd;
      border: 1px solid #f00;
      text-align: center;
    }
</style>

一个
两个
三
四
五七
表td{
填充：5px0；
保证金：0；
背景:#fdd；
边框：1px实心#f00；
文本对齐：居中；
}

请注意，较长的项目会占用更多的空间，我可以将项目添加到HTML中，而无需更改CSS中的任何内容，并且菜单项会收缩以容纳其他项目-整个菜单的长度不会短于或长于800px

---

由于菜单在语义上不是表的正确用法，可以使用列表和纯CSS来实现吗？

使用CSS的唯一方法是硬编码

li

元素的

宽度（假设使用以下结构）：


一个
两个
三
四
五七

保险商实验室{
宽度：80%；/*或其他*/
}
ulli{
宽度：16%；
填充：1%；
}


这可能会留下“未使用”的10%（用于
边距
或额外的
填充
）

在将来的某个时候，您可能可以更流畅地执行此操作。
这是可行的，但我认为您不需要这样的想法：）



测试1
测试2
aölsdkfaösdlfk
是的，宝贝
嗨

主人{
宽度：800px；
背景色：黑色；
高度：100px；
颜色：白色；
显示：表格；
}
桌子{
宽度：100%；
}
保险商实验室{
显示：表格行；
宽度：100%；
}
李{
显示：表格单元格；
宽度：自动；
保证金：1px；
边框：1px纯白；
背景色：红色；
文本对齐：居中；
垂直对齐：中间对齐；
}

在CSS规则中，是：

<style>
  nav {display:table; width:800px; background:yellow}
  ul {display:table-row; }
  li {display:table-cell; border:1px solid red}
</style>

<nav>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five Seven</li>
 </ul>
</nav>


导航{显示：表格；宽度：800px；背景：黄色}
ul{显示：表行；}
li{显示：表格单元格；边框：1px实心红色}

一个
两个
三
四
五七


基本上，您必须构建一个令牌表。在行动中：

否则：不，如果您不能满足您的要求，则不能。您可以这样做：

<style type="text/css">
#container { width: 800px ; border: 1px dashed #333; }
#container div { width: inherit; display: table-cell; background: #ccc}
</style>

<div id="container">
    <div>Something</div>
    <div>Something</div>
    <div>Something</div>
</div>  


#容器{宽度：800px；边框：1px虚线#333；}
#容器div{width:inherit；display:table单元格；background:#ccc}
某物
某物
某物

这样一来，它就满足了你的需求，但可以扩展到很多项目

希望这能有所帮助。
我能想出一些“几乎”的解决方案，但不是100%的解决方案。可能是一些带有
display:table cell
的东西在Chrome和Firefox中效果很好，但在IE中会出现故障：（你可以查看ie规格，看看它们应用于元素的类。这里我只是复制表类……IE7根本不支持display:table，正如你之后的人所指出的那样。谢谢，但这不是我要找的。我不知道菜单项的数量（例如，网站每个部分的项目数量不同）根据文本长度，每个项目都有不同的宽度。谢谢。与您之前的人的解决方案相同，但在IE7中不起作用，因此我无法使用它。与您之前的解决方案类似。两个问题：1。（次要）所有项目的宽度相同，2。（主要）IE7不支持display:table cell，因此它不起作用。这非常接近，是的，但是内部div可以使用空格：nowrap，或者如果变宽，则换行。
<style>
  nav {display:table; width:800px; background:yellow}
  ul {display:table-row; }
  li {display:table-cell; border:1px solid red}
</style>

<nav>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five Seven</li>
 </ul>
</nav>

<style type="text/css">
#container { width: 800px ; border: 1px dashed #333; }
#container div { width: inherit; display: table-cell; background: #ccc}
</style>

<div id="container">
    <div>Something</div>
    <div>Something</div>
    <div>Something</div>
</div>