为什么浮动“向元素添加”新行？

Question

重点是在这个菜单上有一行包装。 相反，我们得到了“两条线”，我不知道为什么他会放弃这条线。

任何人都可以请你快速了解一下这是怎么回事？

HTML

<div id="main-menu">
<ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
</ul>
</div>

CSS

#main-menu {
    clear: right;
    overflow: hidden;
    margin-top: 75px;
    float:right;
}

#main-menu ul {
    overflow: hidden;
    text-align: right;
    border-radius: 5px;
    background-color: #333;
}

#main-menu ul li {
    display:inline-block;
    padding: 2px 2%;
}

#main-menu ul li a {
    color: #fff;
    font-size: .9em;
}

#main-menu ul li:hover {
    background-color: #EFAB00;
}

#main-menu ul li a:hover {
    text-decoration: none;
}

这是一个例子：

http://jsfiddle.net/XRm6Q/2/

Answer 1

这不是由float造成的，而是因为您正在应用于li的填充（因为当您有padding的百分比时，父母不会调整大小适合）。如果您将padding: 2px 2%;更改为padding: 2px;，那么换行将会消失：little link。

希望有所帮助！

Answer 2

这是因为父元素（ul）的宽度不足以容纳你的lis。

使UL更宽，它将起作用。

http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/8/

---

将width: 100%;添加到父DIV，而不是UL。对不起：D

http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/16/

Answer 3

请参阅http://jsfiddle.net/XRm6Q/10/

我在white-space: nowrap;元素上使用了ul，在white space: normal元素上使用了li。这样您就不需要调整父宽度（然后只需删除/调整li元素上的额外填充或使用边距代替）

这样做，所有项目将保持在同一行

Answer 4

在菜单上设置width，或者使用table-row display，然后使用table-cell作为项目。在后一种情况下，您可能也会在项目上white-space: nowrap，但如果您不知道宽度是多少，它会有优势。