使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/