divの内容を水平方向にスクロールさせ、垂直方向にスクロールさせないようにします

Question

私はいくつかのコンテンツを持つdivを持っています、親指の束、私はそれらを常に水平にしたいとオーバーフローは水平にスクロールされます。私はdivが100％の幅を占めるようにしたい、親指をグループ中心にしておく。つまり、ページが幅広く、グループに集中していて、左にこだわらない。私はjsfiddleを持っていて、なぜ機能していないのか分からないようです。オーバーフロー機能を引き継ぐ代わりに、常にオーバーフローを2番目の行にプッシュします。

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/