Jak zachować poziomą nieuporządkowaną listę od zerwania?

Question

Próbuję utworzyć listę miniatur, które można przewijać w poziomie, ale zrywają się bez względu na to, co robię.

To co mam teraz

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; 

} 

jakieś pomysły na to, co robię źle? Dzięki!

Answer 1

Dodaj white-space: nowrap na ul:

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

Demonstration.

Objaśnienie:

użyłem właściwość white-space ponieważ daje mi potencjał, aby obsłużyć co zrobić z biała przestrzeń pozostawiona w obiekcie, więc powiedziałem, że nie zawijam tego białego przestrzeń zajmująca ul i wyświetlić je wszystkie w jednym wierszu.

Answer 2

użycie nowrap

ul { 

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

    }