CSS动态水平导航菜单填充特定宽度(表行为)

Question

我需要创建一个水平导航菜单,其中包含不断变化的项目数量(这很重要 - 我不能将宽度编码到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>

请注意,较长的项目会占用更多空间,我可以在不更改CSS中的任何内容的情况下将项目添加到HTML中,并且菜单项会缩小以容纳其他项目 - 整个菜单永远不会短于或长于800px.

由于菜单不是一个表的语义正确使用,这可以用列表和纯CSS来完成吗？

Answer 1

在支持表格显示 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>

基本上,您必须构建一个令牌表.在行动:http://jsbin.com/urisa4

否则:不,如果您不能妥协您的要求,请不要.