machen div Inhalte horizontal und nicht vertikal scrollen

Question

Ich habe ein div mit etwas Inhalt, eine Reihe von Daumen, ich möchte, dass sie immer horizontal und jeder Überlauf wird horizontal gescrollt. Ich möchte, dass das Div 100 Prozent breit ist und die Daumen eine Gruppe zentriert hält. Das bedeutet, wenn die Seite breiter ist als die Gruppe, bleiben sie zentriert und nicht links. Ich habe ein Problem und kann nicht herausfinden, warum es nicht funktioniert, es schiebt immer den Überlauf in eine zweite Reihe, anstatt die Überlauffunktion übernehmen zu lassen.

http://jsfiddle.net/z5nEQ/1/ das ist die Geige und der Code in das heißt:

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

irgendwelche Gedanken dazu? Vielen Dank für jede Hilfe

Answer 1

schreiben wie folgt aus:

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

prüfen diese http://jsfiddle.net/z5nEQ/3/