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>

请注意，较长的项目占用更多空间，我可以在HTML中添加项目而不更改CSS中的任何内容，菜单项会缩小以适应其他项目 - 整个菜单的长度始终不超过800像素。

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

- Zdeněk Gromnica

---

我能想到一些“几乎”的解决方案，但没有100%的解决方案。也许可以使用display:table-cell来实现。 - Stephen

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 否则，如果您不能妥协您的要求，则不行。

- DanMan

---

谢谢。和你之前的人提供的解决方案一样，但是它在IE7中不起作用，所以我不能使用它。 - Zdeněk Gromnica

Answer 2

您可以像这样做：

您可以像这样做：

<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>  

这样它可以填充你想要的内容，但可能会增加很多项目。

希望这有所帮助。

- TNC

---

与之前的解决方案相似。存在两个问题：1.（次要问题）所有项目具有相等的宽度，以及2.（主要问题）IE7不支持display: table-cell，因此无法正常工作。 - Zdeněk Gromnica

这非常接近了，但是内部div可能需要使用white-space:nowrap，否则如果它变得太宽，行就会换行。 - DanMan

Answer 3

使用CSS唯一的方法是硬编码li元素的width（假设您将使用以下结构）：

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

ul {
    width: 80%; /* or whatever */
}

ul li {
    width: 16%;
    padding: 1%;
}

JS Fiddle演示。

这可能会留下10％的“未使用”（用于margin或额外的padding）。

将来css计算可能可以更流畅地执行此操作。

- David Thomas

---

谢谢，但那不是我要找的。我不知道菜单项的数量（例如，每个站点部分的项目数量都不同），而且每个项目的宽度都基于文本长度而异。 - Zdeněk Gromnica

Answer 4

这个可以工作，但我不认为你想要这样的东西 :)

<div class="master">
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>aölsdkfaösdlfk</li>
        <li>yeah baby</li>
        <li>hi</li>
    </ul>
</div>

.master {
   width:800px;
   background-color:black;
   height:100px;
   color:white;
    display:table;
}
table {
 width:100%;   
}

ul {
 display:table-row;  
 width:100%; 
}
li {
 display:table-cell;  
 width:auto; 
 margin:1px;
 border:1px solid white;
 background-color:red;
 text-align:center;
    vertical-align:middle;
}

http://jsfiddle.net/UnNyS/

- Luke

---

这在Chrome和Firefox中运行得很好，但在IE中会出现问题 :( - Zdeněk Gromnica

你可以查看IE规范，了解它们应用于元素的哪些类。这里我只是复制表格类... - Luke

IE7完全不支持display: table，正如你之后指出的那样。 - Zdeněk Gromnica