微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 水平列出的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>

解决方法

如果我理解正确,应该是:

http://jsfiddle.net/Uyc8d/

我已经切换到显示: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
}

原文地址:https://www.jb51.cc/html/230106.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐