4

我有一个包含水平菜单的菜单。菜单由一个无序列表组成。每当菜单超过<div>. 我尝试将这些 CSS 定义用于我的<div>：

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

但比意识到，由于菜单是 LIST，不同的列表项在达到宽度时会中断行<div>并移至下一行，因此浏览器不需要水平滚动条（它不显示垂直滚动条也因为这overflow-y: hidden;条线）

有什么想法可以创建一个仅水平滚动的 1 行水平菜单吗？

非常感谢大家。

4

3 回答 3

3

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

对于您的 div，请尝试：

white-space: nowrap;
于 2010-04-05T20:30:49.513 回答
1

您需要在父 div 中放置一个巨大的水平 div 并溢出：auto; 这将允许

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

    • 于 2010-04-05T18:59:09.893 回答
    1

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

    我做了一个小测试让你看看：

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

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

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

    Basically, you use Jquery to count the number of li's inside your div using size(). If they exceed X number, in my example's case 6 (the limit before scroll is needed), then a class is added to the ul to extend its width (.longer) so that there's no line break and the horizontal scrollbar appears.

    It also adds another class (.taller) that increases the height to accomodate the scrollbar itself.

    Cheers G.Campos

    于 2010-04-08T03:10:25.173 回答