html - 单行滚动 HTML 列表

Question

使用列表作为；

<ul id="scroller">
    <li><img src="../static/image/brand1.png" title="brand title"></li>
    .....
</ul>

并具有css属性；

    ul#scroller li {
        list-style: none;
        display: inline;
    }

    ul#scroller li img{
        margin-left: 75px;
        float:left;
    }

    ul#scroller {
        overflow: scroll;
    }

并且 YUI CSS 在此定义之前重置。

问题是; 我的列表项不是水平滚动，而是换行。

和平

Answer 1

您可以添加“空白：nowrap;” 到 ul#scroller 元素。

http://jsfiddle.net/YMDCw/7/

ul#scroller{
    white-space:nowrap;
}
ul#scroller li {
    list-style: none;
    display: inline;
}

ul#scroller li img{
    margin-left: 75px;
}

ul#scroller {
    overflow: scroll;
}
​

Answer 2

我想你想要这样的CSS？

ul {
    height: 150px;
    width: 300px;
    overflow: auto;
    overflow-y: hidden !important;
    overflow-x: scroll !important;
}

li {
    list-style: none;
    min-width: 800px;
}

img {
    list-style: none;
    display: inline-block;
    float: left !important;
}