无法将水平列出的ul水平溢出(并滚动)

Question

无法将水平列出的ul水平溢出(并滚动)

我试图将一个无序列表水平列出(用float:left完成),但它拒绝水平溢出.相反,它会在下一行自动溢出(此外,即使使用overflow-y:none,它也会自动创建一个垂直滚动条.任何想法？

<style type="text/css">
    ul {
        height:15px;
        width:400px;
        overflow-y:none;
        overflow-x:auto;
    }

    li {
        float:left;
    }

</style>

<body>
    <div>
        <ul id="someList">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
            <li>element 4</li>
            <li>element 5</li>
            <li>element 6</li>
            <li>element 7</li>
        </ul>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

thi*_*dot 32

如果我理解正确,那应该是这样的:

http://jsfiddle.net/Uyc8d/

我已切换到display: inline-block(而不是float: left),我正在使用white-space: nowrap以防止包装.

ul {
    width: 400px;
    overflow-x: scroll;
    background: #ccc;
    white-space: nowrap;
}

li {
    display: inline-block;

    /* if you need ie7 support */
    *display: inline;
    zoom: 1;
}

Run Code Online (Sandbox Code Playgroud)

先生,我印象深刻. (4认同)
为了我的一生......我不记得这个CSS属性的名称。谢谢先生。 (2认同)
确保没有**FLOAT**,这将很有效.另外,`overflow-x:auto;`是动态列表上更好的选择,这样除非必要,否则视图中没有条形图. (2认同)

归档时间：	14 年，12 月前
查看次数：	12705 次
最近记录：	6 年，9 月前