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

Question

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

目的是将其与 iPad 之类的触摸屏设备相结合，因此我获得了元素的水平滚动效果。

这是一个小提琴：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;
}