如何在项目之间创建一个具有可变空间的ul li css菜单

The idea is to make a menu with a fixed amount of items. Each of the items must have a fixed padding on them to make them look decent when placing a border around them. (so far so good) But these items must be spread out in a div with a fixed size, spaced evenly - the items themselves won't be the same size as this is dependent on the text within these items.

我们的想法是用一定数量的东西做一个菜单。每个项目必须有一个固定的填充物，以使他们看起来体面时，在他们周围设置边框。(到目前为止还不错)但是这些项目必须以一个固定大小、间隔均匀的div展开——这些项目本身的大小不会与这些项目中的文本相同。

What I can't figure out is how to make sure that the items are on 1 line with a dynamic (more or less) evenly spacing between them within a fixed div (in my case 1000px). The first item should be lined out to the left edge of the div. The last item should be lined out to the right edge of the div.

我搞不懂的是，如何确保项目在一行上，并且在一个固定的div(在我的例子中是1000px)中，它们之间有一个动态(或多或少)的间隔。第一个条目应该对齐到div的左边缘，最后一个条目应该对齐到div的右边缘。

Below is what I have so far. This already puts the padding and border on it, but I can't set a margin: 0 auto on it, well I can, but it doesn't do anything. The main issue is that the spacing in between should be dynamic because the items tend to jump upon zooming the browser which in turn messes up the alignment of the outer items and even makes some items jump to the next line. That's why (zooming messes things up - especially with fixed widths) I'm reluctant to put an actual width on each of the items (I know I need a width to use margin: 0 auto properly, but even when I do use a width, it doesn't seem to do what I want it to do).

下面是我目前所拥有的。这已经在它上面加上了填充和边框，但是我不能设置一个空白:0 auto，我可以，但是它什么都不做。主要的问题是，两者之间的间隔应该是动态的，因为条目往往会在缩放浏览器时跳转，这反过来又会打乱外部条目的对齐，甚至会使一些条目跳转到下一行。这就是为什么(缩放混乱的事情——特别是与固定宽度)我不愿意把每个项目的实际宽度(我知道我需要一个宽使用保证金: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%;
}

2 个解决方案

#1

The simplest would be to use a table instead of li items : you can define the table width and the cell widths will be automatically computed.

最简单的方法是使用表而不是li项:您可以定义表的宽度，并且计算单元格宽度。

You can choose to give them width in % to have them equal or decide to let them proportionally adapted.

你可以选择给它们宽度的百分比，让它们相等，或者决定让它们按比例调整。

No need to be afraid of tables : sometimes they do the job simpler.

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

#2

Using table display modes: http://jsfiddle.net/pnUdp/1/

使用表显示模式: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;
}

I am unsure of how cross-browser this is though...

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

#1