0

关键是在这个菜单上有一个单行，包裹。相反，我们得到的是“两条线”，我不明白他为什么要放弃这条线。

任何人都可以让我快速了解一下这是怎么回事吗？

的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/

4

4 回答 4

2

这不是由 s 引起的float，而是因为您应用到lis 的填充（因为当您有 percent paddings 时，父级不会调整大小以适应）。如果你改变你padding: 2px 2%;的padding: 2px;包装将消失：little link。

希望有帮助！

于 2012-08-28T10:14:15.810 回答
1

这是因为父元素 (ul) 根本不够宽，无法容纳您的 lis。

使UL更宽，它会起作用。

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

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

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

于 2012-08-28T10:11:46.713 回答
1

见http://jsfiddle.net/XRm6Q/10/

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

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

于 2012-08-28T10:12:13.297 回答
1

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

于 2012-08-28T10:12:54.327 回答