Html 无法使水平列表ul水平溢出（并滚动）_Html_Css_Html Lists

Html 无法使水平列表ul水平溢出（并滚动）

html css

Html 无法使水平列表ul水平溢出（并滚动）,html,css,html-lists,Html,Css,Html Lists,我试图让一个无序列表水平列出（使用float:left完成），但它拒绝水平溢出。相反，它会在下一行自动溢出（此外，即使使用overflow-y:none，它也会自动创建一个垂直滚动条。有什么想法吗 <style type="text/css"> ul { height:15px; width:400px; overflow-y:none; overflow-x:auto; } li {

我试图让一个无序列表水平列出（使用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>


保险商实验室{
高度：15px；
宽度：400px；
溢出y：无；
溢出-x：自动；
}
李{
浮动：左；
}

要素1
要素2
要素3
要素4
要素5
要素6
要素7

如果我理解正确，应该是：

我已经切换到使用

display:inline block

（而不是

float:left

），并且我正在使用

空白：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;
}

我可以问一下，在什么情况下，您希望在无序列表上有一个水平滚动条吗？就我个人而言……我记不起这个css属性的名称。谢谢您，Sr。请确保没有浮动，这将非常有效。另外，

overflow-x:auto；

是动态列表上更好的选择，这样，除非必要，否则视图中没有滚动条。