如何制作一个ul li css菜单，项目之间的间距可变。

Question

这个想法是制作一个包含固定数量项目的菜单。每个项目都必须有一个固定的填充，使他们看起来像样时，在他们周围放置一个边界。(到目前为止还不错)但是这些项目必须分布在一个固定大小的div中，间隔均匀-项目本身不会有相同的大小，因为这依赖于这些项目中的文本。

我不明白的是，如何确保这些项目在固定div (在我的例子中是1000px)内动态(或多或少)均匀间隔的一行上。第一项应该排在div的左边缘。最后一项应该排在div的右边缘。

下面是我到目前为止所知道的。这已经在上面设置了填充和边框，但是我不能设置一个空白:0自动在上面，我可以，但是它不会做任何事情。主要的问题是，项目之间的间距应该是动态的，因为在缩放浏览器时，项目往往会跳转，这反过来会扰乱外部项目的对齐，甚至会使一些项目跳到下一行。这就是为什么(缩放会把事情搞得一团糟--尤其是固定宽度)我不愿意给每个项目设置一个实际的宽度(我知道我需要一个宽度来正确地使用边距:0自动，但即使我确实使用了宽度，它似乎也不能达到我想要的效果)。

<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项:您可以定义表格宽度，单元格宽度将自动计算。

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

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

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

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