html - quitar - scroll horizontal css

Barra de desplazamiento horizontal para ul

Question

Por alguna razón, no puedo evitar que el UL y sus LI se envuelvan. Quiero que el ancho del UL sea exactamente el ancho del LI en una línea (sin ajuste) y si el UL se vuelve más ancho que el nav-div (800px), quiero una barra de desplazamiento dentro del navegador para que pueda desplazar el 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 1-20 LI.

¿Alguien sabe cómo hacer que aparezca una barra de desplazamiento sin configurar el ancho del 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;
}

Answer 1

Advertencia: no probado

¿No solo desea 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 a un ancho fijo y el desbordamiento en el UL para desplazarse?

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

Esto causaría que UL se desplace cuando sus li pasaron, digamos 8, ¿es eso lo que está buscando?

Answer 2

Agregue la siguiente regla:

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

Answer 3

Al establecer el width en <ul> para inherit , puede usar la propiedad de overflow para establecer el comportamiento de desbordamiento del elemento. Con el scroll valores, todos los contenidos del elemento se desplazarán (en las direcciones x e y) si la altura y el ancho de los contenidos se desbordan a los de la caja:

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

Answer 4

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

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

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

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

Answer 5

prueba esto

ul {
   white-space:nowrap;
}

li {
   display:inline;
}