How do I keep a horizontal unordered list from hacking?

Question

I am trying to create a list of thumbnails that I can scroll horizontally, but it breaks no matter what I do.

This is what I have now

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

Any ideas on what I'm doing wrong? Thanks!

Answer 1

Add white-space: nowrap to ul :

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

Demonstration.

Explanation:

I used the white-space property because it gives me the ability to handle what to do with the white space remaining in the object, so I said that it does not wrap this white space with the ul value and displays all of them on one line.

Answer 2

use nowrap

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