Question

我想制作横向菜单。我有一个带有三个列表元素（ul）的无序列表（li）。列表元素被强制与display: inline-block;一行。

我喜欢在菜单的左侧和右侧获得5％的保证金。在列表元素之间，我有1.5％的保证金。

margin-left (5%)
Element 1 (29%)
margin-right (1%)
margin-left (0.5%)
Element 2 (29%)
margin-right (0.5%)
margin-left (1%)
Element 3 (29%)
margin-right (5%)

如果我将所有百分比加起来，我得到100％。

5 + 29 + 1 + 0.5 + 29 + 0.5 + 1 + 29 + 5 = 100

但不幸的是，换行了。

举个例子： http://jsfiddle.net/8U5hM/2/

感谢提示！

Answer 1

display: inline-block;元素之间有空格。只需删除它们或评论它们。

Demo 1:

<nav>
    <ul>
        <li id="eins"></li><li id="zwei"></li><li id="drei"></li>
    </ul>
</nav>

Demo 2:

<nav>
    <ul>
        <li id="eins"></li><!--
     --><li id="zwei"></li><!--
     --><li id="drei"></li>
    </ul>
</nav>

Answer 2

内联块;读取代码中的空格。将您的列表编辑为：

<li id="eins"></li><li id="zwei"></li><li id="drei"></li>

而不是

<li id="eins"></li>
<li id="zwei"></li>
<li id="drei"></li>

Answer 3

工作JSFiddle（您不需要按ID进行操作，而是可以使用:first-child）。

相关CSS：

nav ul li {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
    margin-left: 2%;
    height: 40px;
    background: lime;
}

nav ul li:first-child {
    margin-right: 0;
}

nav ul li:last-child {
    margin: 0;
}

HTML：

<nav>
    <ul>
        <li></li><li></li><li></li>
    </ul>
</nav>

Answer 4

改变：

nav ul li {
 display: block;
 float:left;
 ..
}

元素和边距的总和是100％，但是换行符

4 个答案: