HTML，溢出：滚动和浮动

Question

我有一个div，它封装了许多无序列表（ul）。我将每个ul设置为“float：left”。而且我还有包含它们的父div设置为“overflow-x：scroll”。发生的事情是，当它们到达页面边缘并且没有并排停留以利用父div的滚动属性（滚动条在那里）时，它们正在进行包装。为什么？我该如何解决这个问题？

感谢您的帮助。

Answer 1

你需要将这些uls插入到另一个div中，你给它宽度= [ul的宽度] * [uls的数量]
http://jsfiddle.net/seler/gAGKh/ 或计算uls的总宽度 http://jsfiddle.net/seler/gAGKh/1/

Answer 2

您可以设置要显示的列表项：inline-block，然后使用white-space：nowrap。适用于大多数现代浏览器。

http://jsfiddle.net/gAGKh/22/

Answer 3

因为您浮动了UL，它们不再存在于文档流中，因此它们不会扩展父div（因此包装。）

尝试在父div上设置显式宽度，允许所有这些宽度并排存在。

另外，如果您没有清除父div中的UL，那么您很可能会遇到问题，垂直问题。确保清除浮子：）

Answer 4

你需要：

1. 让<li>也浮动。
2. 将固定宽度设置为每个<ul>。
3. 将固定宽度设置为包含<div>，足以容纳所有列表。

例如：

ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left;  }
div { overflow-x: scroll; width: 750px; }

Test case