宽度为100％的水平滚动条

Question

我想要一些宽度为100％的列表项（浮动）。

列表项的数量是任意的，可以是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小提琴： http ：//jsfiddle.net/f6CRt/