如何使项目之间的可变空间的UL里的CSS菜单(how to make a ul li css men

这个想法是让一个菜单项固定量。每个项目都必须对他们有固定的间隙，让他们把周围的边框时，他们看起来体面。（到目前为止好），但这些项目必须在一个固定大小的一个div被传播出去，均匀地间隔开 - 项目本身将不会是相同的大小，因为这取决于这些项目中的文本。

我想不通的是如何确保该项目是与动态1号线（或多或少）固定的div内它们之间均匀间隔（在我的情况1000像素）。第一项应内衬出到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:

最简单的是使用一个表，而不是李项：您可以定义表格的宽度和单元格宽度将自动计算。

你可以选择给他们在％的宽度，让他们等于或决定让他们按比例调整。

没有必要害怕表：有时候他们做的工作更简单。

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

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