css - 100% 宽度的水平滚动条

Question

我想要一些宽度为 100% 的列表项( float )。

列表项的数量是任意的，可以是1个或2个，也可以是20个或30个。

当页面的 100% 宽度无法容纳更多元素时，我希望它有一个滚动条来滚动浏览。

这是我目前正在使用的，但它不会创建卷轴。我猜我需要为溢出设置一个宽度才能工作，但我希望宽度为 100%。

.scroll {overflow-x:scroll;}
.scroll li {float:left}

<div class="scroll">
   <ul>
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
       <li>item 4</li>
       <div stye="clear:both"></div>
   </ul>
</div>

那么如何在水平滚动时保持 100% 的宽度？

Answer 1

添加white-space: nowrap到.scroll ul

.scroll {overflow:auto; }
.scroll ul{ white-space: nowrap;}
.scroll li {display: inline-block;}

JS fiddle : http://jsfiddle.net/f6CRt/