Question

我正在尝试创建一个水平菜单，其中包含一个带有overflow:hidden的父div和一个带有overflow:auto的子级。这允许我有一个没有滚动条的可滚动div。但是，为了防止li元素中断，子元素具有white-space:nowrap属性。这使滚动条再次出现。我尝试使用display:table作为nowrap的替代品但不允许滚动。关于如何进行的任何想法？谢谢

更新：看到我无法正确解释自己，我已经在jsfiddle上传了一个我想要的小例子：LINK 我想要一个彼此相邻的项目列表，它比容器更宽，并且用户能够滚动但没有显示滚动条。如果我有white-space:nowrap属性，则会出现滚动条，但如果我将其删除，则元素会相互影响。谢谢！

Answer 1

＆＃13;

#wrapper {
    width: 250px;
    overflow: hidden;
    outline: 1px solid blue;
}

#scroller {
    width: 270px;
    height: 100px;
    overflow: auto;
    
}

＆＃13;

<div id="wrapper">
    <div id="scroller">
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>

＆＃13;

试试这个以E.g

带有nowrap和隐藏滚动条的可滚动div

1 个答案: