防止包含CSS菜单的div包装而不破坏菜单下拉菜单

Question

我正在实施基于此菜单的菜单：

http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx

（Demo）

菜单使用UL / LI结构和CSS进行适当的渲染。

问题是，如果浏览器不够宽，主菜单项会换行。

我把DIV中的菜单包围了。

申请时

overflow-x: auto;

到该DIV，鼠标悬停在菜单项上会导致滚动条出现在DIV周围（可能是为了容纳下拉菜单）。

如何在保留下拉菜单的同时防止DIV换行？

Answer 1

您可以简单地为div标签添加固定宽度，例如width: 700px;

Answer 2

我能想到的最佳解决方案是Jonas Persson的回答中的建议。它正在使用white-space: nowrap。为此，您必须使用display: inline-block而不是float:left/right来水平对齐菜单的元素。

我使用chrome的网络开发人员玩你的演示并使其工作。

只需将每个float: left替换为display: inline-block将font-size: 0添加到ul#menu并使用ul#menu li覆盖font-size:12px - 这就是您使用的尺寸。 （使用display: inline-block在块之间添加一些空格。font-size内容会处理它。）。

接下来确保内嵌块与容器顶部垂直对齐 - 将vertical-align: top添加到li。

最后，将whitespace: no-wrap添加到包裹ul#menu的div中。就是这样。