溢出滚动列表

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/

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

我尝试在ul中添加width: 100%; overflow-x: scroll;，但这不起作用。

Answer 1

由于li元素为inline-block，您可以使用white-space: nowrap来阻止它们包装。

Updated Example

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