如何制作一个带有可变间距的ul li CSS菜单

Question

这个想法是创建一个带有固定数量项目的菜单。每个项目必须具有固定的填充，以使在其周围放置边框时看起来漂亮。 （到目前为止还不错） 但是这些项目必须在具有固定尺寸的div中均匀分布，彼此间距相等 - 这些项目本身的大小不同，因为这取决于这些项目中的文本。

我无法弄清楚如何确保项目在固定div内动态（或多或少）均匀地间隔在一行上。第一个项目应与div的左边缘对齐。最后一个项目应与div的右边缘对齐。

以下是我目前拥有的内容。这已经将填充和边框放在其中，但我无法在其上设置margin：0 auto，好吧，我可以，但它什么也没做。主要问题是之间的间距应该是动态的，因为项目倾向于在缩放浏览器时跳动，从而破坏了外部项目的对齐，并且甚至使一些项目跳到下一行。这就是为什么（缩放会搞乱事情 - 特别是固定宽度）我不愿意在每个项目上放置实际宽度的原因（我知道我需要一个宽度才能正确使用margin：0 auto，但即使我使用宽度，它似乎也不能做我想要做的事情）。

<div id="navigation">
    <ul>
        <li class="menu-1"><a href="" >Home</a></li>
        <li class="menu-2"><a href="" class="">Nieuws</a></li>
        <li class="menu-3"><a href="" class="">Producten</a></li>
        <li class="menu-4"><a href="" class="">Algemene informatie</a></li>
        <li class="menu-5"><a href="" class="">Promoties</a></li>
        <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
        <li class="menu-7"><a href="" class="">Contact</a></li>
    </ul>
</div>

#navigation ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width:1000px;   
    display:block;
}

#navigation li {
    float: left;
    display:inline;
}

#navigation li a {
    padding:10px 15px 10px 15px;
    float:right;

    display: block;
    border: 0.1em solid #dcdce9;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

#navigation{
    width:100%;
}

- 3xil3

---

弹性盒子模型最终会解决这个问题。 - Neil

Answer 1

最简单的方法是使用表格而不是li项目：您可以定义表格宽度，单元格宽度将自动计算。

您可以选择以％为单位为它们分配宽度以使它们相等，或者决定让它们按比例适应。

不必害怕表格：有时它们可以更简单地完成工作。

- Denys Séguret

---

根据原始规范，您需要交替使用菜单单元格（需要收缩包裹）和空单元格（它们需要互相竞争剩余的空间）。 - Neil

或者使用边框和外边距进行调整，或者在单元格内部使用span标签，这取决于最终期望的效果。当然，补充单元格可能也会有用。 - Denys Séguret

我一直认为将表格用于非表格需求是不好的做法，但考虑到目前没有其他解决方案能够满足我的需求，这也值得考虑。 - 3xil3

那是夸张的说法：问题主要出现在使用表格进行普通布局时（很多人过渡到CSS较慢）。但是，如果你小心谨慎，就没有必要避免在特定情况下最适合解决问题的工具。 - Denys Séguret

Answer 2

使用表格展示模式：http://jsfiddle.net/pnUdp/1/

#navigation {
    margin:0px;
    padding:0px;
    display:table;
    width:1000px;
    border-collapse: collapse;
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:table-row-group;
}

#navigation li{
    display:table-cell;
    border: 0.1em solid #dcdce9;
    vertical-align: middle;
}

#navigation li a{
    padding:10px 15px 10px 15px;
    display:block;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

我不确定这在跨浏览器方面的兼容性如何...

- Rob Lowe

---

我该如何动态地使项目之间的间距均匀？这段代码将项目放入单行中，项目之间没有间距。我已经使用菜单的float:left版本实现了相同的效果，但我无法弄清楚如何在项目之间实现自动间距。 - 3xil3

我调整了CSS以允许元素之间的间距：http://jsfiddle.net/pnUdp/7/ - 但要注意，如果任何文本分为两行，事情会变得奇怪。 - Rob Lowe