我如何保持水平无序列表不被破坏？

Question

我正在尝试创建一个可以水平滚动的缩略图列表，但无论我做什么都会中断。

这就是我现在所拥有的

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;

}

关于我做错的任何想法？ 谢谢！

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;

   }