5

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

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

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

这是代表我的问题的 JSFiddle

4

6 回答 6

8

这是一个简单的方法：

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;
}
于 2013-08-23T13:42:05.410 回答
6

知道了！

#scroller {
position: absolute;
height: 100%;
overflow:scroll;
overflow-y: hidden;
white-space:nowrap;   
}
于 2013-08-23T13:41:03.647 回答
2

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/

于 2013-08-23T13:42:30.520 回答
1

您需要添加溢出：

#scroller {
    position: absolute;
    height: 100%;
    overflow:scroll;
    overflow-y: hidden;
}
于 2013-08-23T13:37:02.900 回答
0

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

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

#scroller-wrapper {
    overflow: auto;
    white-space: nowrap;
}
于 2013-08-23T13:40:47.367 回答
0

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

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

于 2013-08-23T13:41:00.383 回答