css - 如何设置一个将采用“无限宽度”（水平滚动条）的 div？

Question

我想画一个简单的水平滚动条。

我的问题是我的滚动条内的元素没有无限宽度，因此在使用 100% 的宽度父项后，下一个元素将显示到新行。我在想 anabsolute div默认情况下采用无限宽度，但显然不是，如何使它工作？

我指定元素的数量是动态的。

这是代表我的问题的 JSFiddle

Answer 1

这是一个简单的方法：

http://jsfiddle.net/thirtydot/gakqm/10/

#scroller-wrapper {
    width: 100%;
    height: 200px;
    background-color: red;
}

#scroller {
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.elem {
    height: 100%;
    display: inline-block;
    outline: 1px solid blue;
}

Answer 2

知道了！

#scroller {
position: absolute;
height: 100%;
overflow:scroll;
overflow-y: hidden;
white-space:nowrap;   
}

Answer 3

CSS：

#scroller-wrapper {
    height: 200px;
    width: 100%;
    background-color:red;
    position: relative;
    overflow-x: scroll;
}

#scroller {
    position: absolute;
    height: 100%;
    white-space: nowrap;
}

.elem {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: auto;
    display: inline-block;
}

http://jsfiddle.net/gakqm/15/

Answer 4

您需要添加溢出：

#scroller {
    position: absolute;
    height: 100%;
    overflow:scroll;
    overflow-y: hidden;
}

Answer 5

除了溢出之外，您还需要使用 white-space 属性禁用换行。

http://jsfiddle.net/gakqm/6/

#scroller-wrapper {
    overflow: auto;
    white-space: nowrap;
}

Answer 6

您需要使用white-space:nowrap;来防止元素换行。

见小提琴：http: //jsfiddle.net/thirtydot/gakqm/12/