如何制作一个项目之间具有可变空间的ul li css菜单

Question

这个想法是制作一个包含固定数量项目的菜单。每个项目都必须有一个固定的填充，以使它们在周围放置边框时看起来不错。 （到目前为止，一切都很好） 但是这些项目必须以固定大小均匀分布在一个 div 中 - 项目本身的大小不会相同，因为这取决于这些项目中的文本。

我想不通的是如何确保项目位于 1 行，并且它们之间的动态（或多或少）均匀间距在固定 div 内（在我的情况下为 1000 像素）。第一项应排在 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%;
}

Answer 1

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

您可以选择以百分比为单位赋予它们宽度以使它们相等或决定让它们按比例调整。

不必害怕桌子：有时它们做得更简单。

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

我不确定这是如何跨浏览器...