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

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

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

2 个答案: