Come mantengo una lista non ordinata orizzontale da rottura?

Question

Sto provando a creare un elenco di miniature che posso scorrere in orizzontale, ma si rompe indipendentemente da quello che faccio.

Questo è quello che ho adesso

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; 

} 

Tutte le idee su quello che sto facendo di sbagliato? Grazie!

Answer 1

Aggiungere white-space: nowrap sul ul:

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

Demonstration.

Spiegazione:

ho usato la proprietà white-space perché mi dà la possibilità di gestire ciò che a che fare con la spazio bianco lasciato nell'oggetto, così l'ho detto per non avvolgere quel bianco spazio che si verifica nello ul e visualizzarli tutti in un'unica riga.

Answer 2

uso nowrap

ul { 

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

    }