在單個行中添加元素並在需要時沿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; 
}