HTML、溢出：滚动和浮动

我有一个div，它封装了许多无序列表（ul）。我将每个ul设置为“浮动：左”。我还将包含它们的父div设置为“overflow-x:scroll”。所发生的事情是，ul在到达页面边缘时正在包装，而不是并排停留以利用父div的滚动属性（滚动条在那里）。为什么？我怎样才能解决这个问题

---

感谢您的帮助。

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

尝试在父div上设置一个显式宽度，以允许它们并排存在

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

您需要：

使

也浮动

为每个

设置固定宽度

将固定宽度设置为包含

，足以容纳所有列表

例如：

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

---

.

您需要在另一个div中插入这些ul，您将为其提供width=[ul的宽度]*[ul的数量]
或计算uls的总宽度

---

您可以将列表项设置为显示：inline block，然后使用空白：nowrap。适用于大多数现代浏览器

---

创建内部div有很大帮助。我没有使用JS来计算适当的宽度，而是发现将新内部div的静态宽度设置为足够大的宽度以考虑最极端的情况不会对布局造成损害。谢谢seler.@s2cuts，只有当您具有恒定的ul宽度和恒定的ul编号时，才可能有效。令人讨厌的javascript修复，ddlshack描述的答案是一个更干净的解决方案。解释是我查询的一部分，谢谢。您还可以解释一下“确保清除浮动”是什么意思吗？请确保使用类似的方法将父容器扩展到内容的高度。否则，您将遇到垂直高度的问题，类似于水平宽度的问题。只是一个提醒。