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

Posted 2023-04-13

【中文标题】CSS动态水平导航菜单填充特定宽度（表格行为）

【英文标题】：CSS dynamic horizontal navigation menu to fill up specific width (table behavior)

【发布时间】：2011-07-02 05:02:30

【问题描述】：

我需要创建一个水平导航菜单，其中包含不断变化的项目数量（这很重要 - 我不能将宽度硬编码到 CSS 中，我不想用 JS 计算它们）填充到一定的宽度，比如 800px。

有桌子，

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

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

【问题讨论】：

我能想到一些“几乎”但不是 100% 的解决方案。也许有display:table-cell

【参考方案1】：

在browsers that support the table display 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

否则：不，如果你不能妥协你的要求。

【讨论】：

谢谢。和你前人一样的解决方案，但是在IE7下不行，所以我用不了。

【参考方案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>  

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

希望这会有所帮助。

【讨论】：

与您之前的解决方案类似。两个问题：1.（次要）所有项的宽度相等，2.（主要）IE7不支持display:table-cell，所以不起作用

非常接近，是的，但是内部 div 可以使用 white-space:nowrap 或者如果它变宽，则换行。

【参考方案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 demo.

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

在未来的某个时候css calculations 可能能够更流畅地执行此操作。

【讨论】：

谢谢，但这不是我要找的。我不知道菜单项的数量（例如，网站每个部分的项目数量不同）并且每个项目的宽度根据文本长度而不同。

【参考方案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/

【讨论】：

这在 Chrome 和 Firefox 中效果很好，但在 IE 中失效:(

您可以查看 ie 规范它们适用于元素的类。这里我只是复制表格类...

IE7 根本不支持 display: table，正如你指出的那样。