Horizontal Scrollbar For Ul

For some reason, I can't prevent the UL and it's LI's from wrapping. I want the UL's width to be exactly the width of the LI's on one line (without wrapping) and if the UL becomes

Solution 1:

try this

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

Solution 2:

You can use display: inline-block; white-space: nowrap; for the wrapper and display: inline or display: inline-block for the children.

So, it would look like this: http://jsfiddle.net/kizu/98cFj/

And, if you'll need to support IE add this hack in conditional comments to enable inline-blocks in it:

.navbuttons,
.navbuttons LI {
    display: inline;
    zoom: 1;
}

Solution 3:

Caveat: Untested

Would you not just want to set a width for the li item

div#nav ul li {    
   margin-right: 15px;     
   float: left;     
   font-size: 12px;     
   list-style-type: none;
   width: 100px;
}

And then set the width to a fixed width and overflow on the UL to scroll?

div#nav ul {
    width: 800px;
    overflow: scroll;
}   

This would cause you UL to scroll when your li's went past say 8, is that what you're after?

Solution 4:

By setting the width on the <ul> to inherit you can use the overflow property to set the overflow behavior of the element. With the value scroll, all of the element's contents will scroll (in both x and y directions) if the height and the width of the contents overflow that of the box:

div#nav ul
{
    overflow: scroll;
    width: inherit;
    height: inherit;
}

Solution 5:

Add the following rule:

div#nav ul {
   overflow-x: hidden;
   overflow-y: scroll;
   white-space: nowrap;
}