仅支持水平滚动！

Question

4

我有一个包含水平菜单的 <div>。该菜单由无序列表组成。当菜单超出 <div> 的宽度时，我希望该 <div> 获得水平滚动条。我尝试使用以下 CSS 定义我的 <div>：

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

但是后来我意识到，由于菜单是列表形式，不同的列表项会在达到

的宽度时换行并移至下一行，因此浏览器认为不需要水平滚动条（也不显示垂直滚动条，因为有overflow-y: hidden;属性）。你们有什么想法可以创建一个只能水平滚动的一行菜单吗？非常感谢。

- Crippletoe

请发布您的列表 CSS。 - Flexo

3个回答

1

你需要在具有overflow: auto的父div中放置一个巨大的水平div；这将使

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

- Baloneysammitch

1

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

我为您做了一个小测试，请看：

第一个例子有6个或更多的li超出了容器div的宽度，这意味着您不需要滚动条。

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

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

它还会添加另一个类（.taller），以增加高度以适应滚动条本身。

Cheers G.Campos

- Capagris

JQuery 其实只是额外的奖励。像你所做的那样将宽度应用于 UL，实际上可以防止它断行！谢谢！ - Crippletoe

1

您链接的页面是404。请始终在您的答案本身中包含代码，以避免出现此情况。 - Nathan

好的，我在凌晨3点花了几分钟重写了示例，只是为了取悦那些生气的投票者；）- 主帖已更新。 - Capagris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- King Chung Huang · Accepted Answer

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

对于您的 div，请尝试：

white-space: nowrap;