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

Question

我有一个容器包装器div,我想拉伸它的父级宽度,所以我把它设置为100%宽度.我希望有子div,如果它们比包装器宽,它只会添加一个水平滚动.你可以在这里看看我的小提琴,看看我的问题.我不希望第4个元素在新行上,而是在wrapperdiv 的边框之外,并让它创建一个水平滚动.有帮助吗？

Answer 1

最好的方法是将元素设置为inline-block,然后使用white-space: nowrap以防止它们破坏到新的行.除此之外,你错过了一个分号overflow-x:scroll.

jsFiddle例子

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

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