मैं क्षैतिज अनियमित सूची को तोड़ने से कैसे रोकूं?

Question

मैं थंबनेल की एक सूची बनाने की कोशिश कर रहा हूं जिसे मैं क्षैतिज स्क्रॉल कर सकता हूं, लेकिन इससे कोई फर्क नहीं पड़ता कि मैं क्या करता हूं।

यह है कि मैं क्या अब

http://jsfiddle.net/EXCf3/

ul{ 
    width: 100%; 
    list-style-type: none; 
    margin: auto; 
    overflow-x: scroll; 
} 
li{ 
    height: 100px; 
    width: 100px; 
    border: 1px solid red; 
    display: inline-block; 

} 

मैं गलत क्या कर रही हूं पर कोई भी विचार है? धन्यवाद!

Answer 1

ul पर white-space: nowrap जोड़ें:

ul { 
    width: 100%; 
    list-style-type: none; 
    margin: auto; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

Demonstration.

स्पष्टीकरण:

मैं white-space संपत्ति क्योंकि यह मुझे संभावित क्या से कोई लेना देना संभाल करने देता है इस्तेमाल किया ऑब्जेक्ट में सफेद जगह छोड़ी गई, इसलिए मैंने कहा कि उस सफेद की कोई लपेट नहीं है ul पर स्थान ले रहा है और उन सभी को एक पंक्ति में प्रदर्शित करता है।

Answer 2

nowrap उपयोग

ul { 

white-space: nowrap; 
width: 100%; 
list-style-type: none; 
margin: auto; 
overflow-x: scroll; 

    }