列表溢出滚动

Question

我有以下 html：

<div class='wrapper'>
    <ul>
         <li>Test</li>
         <li>Test</li>
         <li>Test</li>
         <li>Test</li>
    </ul>
    <div class='content'>
    </div>
</div>

这是一个小提琴：http://jsfiddle.net/cce08n83/

基本上，如您所见，紫色李在宽度方向上太大，无法放入包装纸内，因此它们会掉到下一行。但是，我真的希望它在变得太大时添加一个 overflow-x: scroll，而不是让它下降。但我不希望滚动条显示包装内的整个元素，就在紫色 li 的下方？

我尝试添加：width: 100%; overflow-x: scroll; 到 ul，但没有成功。

Answer 1

由于 li 元素是 inline-block，您可以使用 white-space: nowrap 来防止它们换行。

Updated Example

ul {
    white-space: nowrap;
    overflow-x: scroll;
}

列表溢出滚动

Overflow scroll for list

html

css

overflow