如何为左浮孩子制作水平卷轴？

Question

我有一个容器包装器div，我想拉伸它的父级宽度，所以我把它设置为100％宽度。我希望有子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;
}

如果你绝对必须使用浮动元素，你基本上必须用另一个宽度更大的元素包装元素。

Answer 2

以下css将提供水平滚动。要获得垂直滚动，请使用overflow：scroll;

.wrapper {
    background-color: #FF0000;
    height: 50px;
    overflow: auto;
    white-space: nowrap;
    width: 30%;
}