Menu
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>
315
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
First we will create a content blocks and put them under two layers of wrapper. Then we'll rotate the outer wrapper so that the top side is on the left and the bottom is on the right. This way we turn the vertical scroll into horizontal one. Then we rotate the inner wrapper back so the content is in the right position.
If I understand correctly, this should be it:
http://jsfiddle.net/Uyc8d/
I've switched to using 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
