0

我正在实现一个基于这个的菜单：

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

（演示）

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

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

菜单包装

我已经将菜单包围在一个 DIV 中。

当我申请

overflow-x: auto;

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

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

4

2 回答 2

0

您可以简单地为 div 标签添加一个固定宽度，就像这样width: 700px;

于 2012-07-25T19:42:32.840 回答
0

我能想到的最佳解决方案是 The Jonas Persson 的回答中的评论中建议的解决方案。它正在使用white-space: nowrap. 但是，要使其正常工作，您必须使用display: inline-block而不是float:left/right水平对齐菜单的元素。

我使用 chrome 的 web 开发人员玩弄了你的演示并使它工作。

只需将 every 替换float: left为display: inline-blockAdd font-size: 0toul#menu并将其覆盖ul#menu li为font-size:12px- 这就是您使用的大小。（使用display: inline-block在块之间添加了一些空格。这些font-size东西会处理它。）。

接下来确保内联块与容器顶部垂直对齐 - 添加vertical-align: top到li's.

最后，将whitespace: no-wrapdiv 添加到 wrappingul#menu中。而已。

于 2012-07-26T03:06:41.850 回答