How I keep a horizontal unordered list from breaking?

Question

I'm 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 on the 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 potential to handle what to do with the white space left in the object so I said it to make no wrap of that white space occuring the ul and display all of them in one line.

Answer 2

use nowrap

ul {

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

   }