100% 宽度的水平滚动条答案

【问题标题】：horizontal scroll bar with 100% width100% 宽度的水平滚动条
【发布时间】：2014-01-25 22:43:20
【问题描述】：

我想要一些 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% 的宽度？

【问题讨论】：

background css 100% width horizontal scroll issue 的可能重复项
Horizontal Scrolling?的可能重复
overflow:scroll-x; 是无效的 CSS - overflow-x:scroll; 是无效的 CSS，但在 Firefox 中除外。规范在这一点上很混乱，Mozilla 玩得很严格，而 IE 和 Webkit 都支持单独的 X 和 Y 定义。

标签： css

【解决方案1】：

将white-space: nowrap 添加到.scroll ul

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

JS 小提琴： http://jsfiddle.net/f6CRt/

【讨论】：

【解决方案2】：

根本不要使用浮点数。浮动元素是块级的，white-space: nowrap; 会导致文本离开屏幕，仅适用于内联元素 -- 这是possible duplicate of your question...

所以基本上使用：

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

Here's a fiddle

【讨论】：