html - 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

添加white-space: nowrap在ul：

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;

   }