使div內容水平滾動而不是垂直滾動

Question

我有一些內容的div，一堆大拇指，我希望它們始終是水平的，任何溢出都會水平滾動。我希望div佔據100％的寬度，讓大拇指保持居中，這意味着當頁面更寬時，它們將保持居中並且不會卡在左側。我有一個jsfiddle，似乎無法弄清楚爲什麼它不工作，它總是將溢出推入第二行，而不是允許溢出功能接管。

http://jsfiddle.net/z5nEQ/1/是在這一小提琴和代碼是：

CSS：

.box{ 
width:50px;height:100px;border:1px solid black;float:left; 
} 

#container{ 
width:100%; 
height:200px; 
float:left; 
overflow-x:scroll; 
} 

HTML：

<div align="center" style="width:100%;height:90px;border:1px solid red;"> 

<div id="container"> 

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"> 
</div><div class="box"></div><div class="box"></div><div class="box"></div><div 
class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 
<div class="box"></div> 

</div> 
</div>​ 

對此有何看法？感謝您的幫助

Answer 1

這樣寫：

.box{ 
    width:50px; 
    height:100px; 
    border:1px solid black; 
    display:inline-block; 
    *dsplay:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    white-space:normal; 
} 
#container{ 
    width:100%; 
    height:200px; 
    float:left; 
    overflow-x:scroll; 
    white-space:nowrap; 
} 

入住這http://jsfiddle.net/z5nEQ/3/