仅水平滚动！

Question

我有一个包含HORIZONTAL菜单。菜单包含无序列表。 当菜单超过<div>的宽度时，我希望div获得水平滚动条。 我尝试将这些CSS定义用于我的<div>：

position: absolute;
width: 380px;   
overflow: auto;
overflow-y: hidden;
height: 30px;

但是没有意识到由于菜单是LIST，不同的列表项只要达到<div>的宽度就会中断行并继续到下一行，因此浏览器看不到需要水平滚动条（由于overflow-y: hidden;行，它也不显示垂直方向）

任何想法如何创建一个仅水平滚动的1行水平菜单？

非常感谢你们。

Answer 1

您可以使用white-space属性来阻止包装。如果没有更多代码，很难知道它是否适用于您的情况。

对于你的div，试试：

white-space: nowrap;

Answer 2

你需要在父div中放置一个大的水平div：overflow：auto; 这将允许

向左浮动而不包裹到下一行，并且只有在超过父div的边界时才会滚动。

Answer 3

据我所知，没有基于CSS的解决方法。但是，您可以使用Jquery来解决它。

我为你做了一点测试：

http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html

第一个示例有6个左右的li超过容器div的宽度，这意味着你不需要滚动条。

第二个例子有8-9个li，它超过了容器div的宽度，这意味着你需要一个滚动条。

基本上，您使用Jquery使用size（）计算div内部li的数量。如果它们超过X数，在我的例子中的情况6（需要滚动之前的限制），然后将一个类添加到ul以扩展其宽度（.longer），以便没有换行符并且出现水平滚动条。

它还添加了另一个类（.taller），它可以增加高度以容纳滚动条本身。

干杯 G.Campos