barra de desplazamiento horizontal para ul

Por alguna razón, no puedo evitar que la UL y sus LI se envuelvan. Quiero que el ancho de la UL sea exactamente el ancho de la LI en una línea (sin envolver) y si la UL se vuelve más ancha que el div de navegación (800 px), quiero una barra de desplazamiento dentro de la navegación para poder desplazar la LI.

Intenté casi cualquier cosa con pantalla, espacios en blanco, ancho y alto, pero solo puedo hacer que funcione si le doy a la UL un cierto ancho. Esto, sin embargo, no es una opción, ya que la página se genera y puede contener de 1 a 20 LI.

¿Alguien sabe cómo hacer que aparezca una barra de desplazamiento sin configurar el ancho de UL?

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

prueba esto

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

Puedes usar display: inline-block; white-space: nowrap; para la envoltura y display: inline o display: inline-block Para los niños.

Entonces, se vería así: http://jsfiddle.net/kizu/98cFj/

.navbuttons {
    display: inline-block;
    overflow: auto;
    overflow-y: hidden;
    max-width: 100%;
    margin: 0 0 1em;
    white-space: nowrap;
    background: #AAA;
}

.navbuttons LI {
    display: inline-block;
    vertical-align: top;
}

Y, si necesita admitir IE, agregue este truco en comentarios condicionales para habilitar inline-blockestá en él:

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

Advertencia: no probado

¿No desearía simplemente establecer un ancho para el elemento li?

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

¿Y luego establecer el ancho en un ancho fijo y desbordarse en la UL para desplazarse?

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

Esto haría que su UL se desplazara cuando su li pasó, digamos, 8, ¿es eso lo que está buscando?

Al establecer el width sobre el <ul> a inherit puedes usar el overflow propiedad para establecer el comportamiento de desbordamiento del elemento. con el valor scrolltodo el contenido del elemento se desplazará (en ambas direcciones x e y) si la altura y el ancho del contenido superan el del cuadro:

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

Agrega la siguiente regla:

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