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/

Answer 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

水平滚动条，宽度为100％

2 个答案: