làm cho nội dung div cuộn theo chiều ngang và không theo chiều dọc

Question

Tôi có một div với một số nội dung, một loạt các ngón tay cái, tôi muốn chúng luôn luôn nằm ngang và bất kỳ tràn được cuộn theo chiều ngang. Tôi muốn div chiếm 100% chiều rộng, giữ ngón tay cái một nhóm được căn giữa, có nghĩa là khi trang đó rộng hơn thì nhóm họ ở giữa và không bị mắc kẹt ở bên trái. Tôi có một jsfiddle và không thể có vẻ để tìm ra lý do tại sao nó không hoạt động, nó luôn luôn đẩy tràn vào một hàng thứ hai thay vì cho phép các tính năng tràn để tiếp nhận.

http://jsfiddle.net/z5nEQ/1/ đó là fiddle và mã trong đó là:

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>​ 

bất kỳ suy nghĩ về điều này? Nhờ sự giúp đỡ

Answer 1

Viết như thế này:

.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; 
} 

Kiểm tra này http://jsfiddle.net/z5nEQ/3/