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>

请注意,较长的项目占用更多的空间,我可以在HTML中添加项目,而无需更改CSS中的任何内容,并且菜单项缩小以适应其他项目 – 整个菜单永远不会缩短或超过800像素.

由于菜单不是语义上正确的使用表,可以用列表和纯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>