Question

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

Answer 1

try this

ul {
   white-space:nowrap;
}

li {
   display:inline;
}