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

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并将其全部显示在一行中.