html - 如何为左浮动的 child 制作水平滚动条？

Question

我有一个容器包装器 div，我想拉伸(stretch)它父级的宽度，所以我将它设置为 100% 宽度。我想让 child div 在里面，如果它们比包装器宽，它只会添加一个水平滚动条。你可以看看我的fiddle在这里看到我的问题。我不希望第 4 个元素在新行上，而是在 wrapper div 的边界之外并让它创建水平滚动。有帮助吗？

Answer 1

最好的方法是将元素设置为 inline-block，然后使用 white-space: nowrap 来防止它们换行。除此之外，您在 overflow-x:scroll 之后少了一个分号。

jsFiddle example

.element {
    width:30%;
    height:50px;
    background-color:#0f0;
    display:inline-block;
    margin-right:3px;
    white-space: nowrap;
}

如果你绝对必须使用 float 元素，你基本上必须用另一个具有更大宽度的元素包裹元素。