achow achow - 5 months ago 13
CSS Question

Cannot get horizontally-listed ul to overflow horizontally (and scroll)

I'm trying to get an unordered list to be listed out horizontally (accomplished with float:left), but it refuses to overflow horizontally. Instead, it automatically overflows in the next line (furthermore, even with overflow-y:none, it creates a vertical scrollbar automatically. Any ideas?

<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>

Answer

If I understand correctly, this should be it:

http://jsfiddle.net/Uyc8d/

I've switched to display: inline-block (instead of float: left), and I'm using white-space: nowrap to prevent wrapping.

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

li {
    display: inline-block;

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