我如何保持水平的无序列表不断？ [英] How I keep a horizontal unordered list from breaking?

问题描述

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

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

这是我现在的

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!

推荐答案

添加 white-space：nowrap 在 ul ：

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

演示。

说明：

我使用了 white-space 属性，因为它让我有潜力去处理对象中剩下的空白，所以我说它没有该空格的换行发生 ul ，并将它们显示在一行中。

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.

这篇关于我如何保持水平的无序列表不断？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！