div सामग्री को क्षैतिज रूप से स्क्रॉल करना और लंबवत नहीं

Question

मेरे पास कुछ सामग्री के साथ एक div है, अंगूठे का एक समूह, मैं उन्हें हमेशा क्षैतिज होना चाहता हूं और कोई अतिप्रवाह क्षैतिज स्क्रॉल हो जाता है। मैं div को 100 प्रतिशत चौड़ाई लेना चाहता हूं, अंगूठे को एक समूह केंद्रित रखता हूं, जिसका अर्थ है कि जब पृष्ठ व्यापक होता है तो समूह वे केंद्रित रहते हैं और बाएं नहीं फंस जाते हैं। मेरे पास एक jsfiddle है और यह पता लगाना प्रतीत नहीं होता कि यह क्यों काम नहीं कर रहा है, यह अतिप्रवाह सुविधा को खत्म करने की अनुमति देने के बजाय हमेशा दूसरी पंक्ति में अतिप्रवाह को धक्का देता है।

http://jsfiddle.net/z5nEQ/1/ कि है बेला और उस में कोड है:

सीएसएस:

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

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

एचटीएमएल:

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