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 wider than the nav-div (800px), I want a scrollbar within the nav so I can scroll the LI.
I tried pretty much anything with display, whitespace, width's and height, but I can only get it to work if I give the UL a certain width. This, however, is not an options, since the page is generated and can contain 1-20 LI's.
Does anyone know how to make a scrollbar come up without setting the UL's width?
HTML:
<div id="nav">
<ul id="navbuttons">
<li>Some text</li>
<li>Some text</li>
...
</ul>
</div>
CSS:
div#nav
{
height: 100px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
div#nav ul li
{
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
}
try this
ul {
white-space:nowrap;
}
li {
display:inline;
}