HTML、溢出：滚动和浮动
我有一个 div 封装了许多无序列表（ul）。我将每个 ul 设置为“float:left”。我还将包含它们的父 div 设置为“overflow-x:scroll”。发生的情况是 ul 在到达页面边缘时会换行，而不是并排放置以利用父 div 的滚动属性（滚动条在那里）。为什么？我该如何解决这个问题？
感谢您的任何帮助。
I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?
Thanks for any help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您需要将这些 ul 插入另一个 div 中，您将为其指定 width=[ul 宽度]*[ul 数量]
http://jsfiddle.net/seler/gAGKh/
或计算 ul 的总宽度
http://jsfiddle.net/seler/gAGKh/1/
you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/
您可以将列表项设置为显示：inline-block，然后使用空白：nowrap。适用于大多数现代浏览器。
http://jsfiddle.net/gAGKh/22/
You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.
http://jsfiddle.net/gAGKh/22/
因为您浮动了 UL，所以它们不再存在于文档流中，因此它们不会扩展父 div（因此会换行）。
尝试在父 div 上设置显式宽度，以允许所有它们并排存在边。
另外，如果您没有清除父 div 中的 UL，那么您很可能也会遇到垂直问题。确保清除浮动:)
Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)
Try setting an explicit width on the parent div that allows for all of them to exist side by side.
ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)
您需要：
也浮动。设置固定宽度。
，足以容纳所有列表。例如：
测试用例。
You need to:
<li>also float.<ul>.<div>, enough to hold all the lists.For example:
Test case.