Question

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.

我无法理解的是,如何确保项目在1行与动态(或多或少)在固定的 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/" rel=“no follow”>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;
}

我不太清楚这到底有多过客...

友情链接