如何使div水平滚动

Question

我想创建一个布局，我想在水平方向上对齐内容，但每行只能在水平方向滚动。这是我的JSFiddle Sample。

.x-scroller{
    overflow-x: scroll; 
    overflow-y:hidden; 
    height:100px; 
    width: 300px
}

.x-scroller DIV将在循环中与她的内容动态生成，每个x-scroller DIV将同样具有一些内容，我希望能够在水平方向上滚动，只能在下图：

Answer 1

this您正在寻找什么？

＆＃13;

＆＃13;

.outer {
    width: 500px;
    height: 100px;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.outer div {
    width: 24.5%;
    background-color: #eee;
    float: none;
    height: 90%;
    margin: 0 0.25%;
    display: inline-block;
    zoom: 1;
}

＆＃13;

<div class="outer">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以解决这个问题我操纵css white-space属性

.x-scroller {
    overflow-x: scroll;
    overflow-y:hidden;
    width: 300px;
    white-space: nowrap
}

FIDDLE DEMO

Answer 3

您可以通过将display属性添加到inline-block来解决此问题。 Fiddle Demo

.x-scroller{
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 100px; 
    width: 300px;
    display: inline-block;
    white-space: nowrap
}

Answer 4

这会将文本分成两条长水平线，但在给定当前文本的情况下看起来不太理想。

.x-scroller{
    overflow-x: scroll; 
    overflow-y: hidden; 
    height:100px; 
    width: 300px;
    white-space: pre;
}