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 中，菜单项会缩小以容纳其他项目 - 整个菜单永远不会短于或长于 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

否则：不，如果您不能妥协您的要求，则不这样做。

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>  

这样它就可以填满你想要的东西，但可以增长到很多项目。

希望这有帮助。

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 计算可能能够更流畅地执行此操作。

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