css - 在单行中添加元素并在需要时沿 x 滚动

Question

我试图在一个 div 中的一行中添加多个元素。但是，如果空间不足，它会溢出到第二行。我怎样才能强制他们排成一行？我希望在必要时沿 x 轴显示滚动条，但它们不应溢出到第二行。

目的是将其与 iPad 等触摸屏设备结合使用，以便为元素提供水平滚动效果。

这是一个 fiddle : http://jsfiddle.net/PW5Q5/8/

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="element"></div>
    <div id="element"></div>
    <div id="element"></div>
</div>

CSS

div#wrapper {
    height: 150px;
    width: 500px;
    border: 1px red solid;
    overflow-x: auto;
}
div#element {
    height: 100px;
    margin-top: 25px;
    width: 200px;
    border: 1px blue solid;
    display: inline-block;
    margin-left: 30px;
}
​

Answer 1

使用 white-space: nowrap - http://jsfiddle.net/PW5Q5/14/

div#wrapper {
    height: 150px;
    width: auto;
    border: 1px red solid;
    overflow-x: auto;
    white-space:nowrap;
}