para - ¿Cómo forzar el desplazamiento horizontal en una lista HTML utilizando CSS?

menu horizontal css ejemplos

Question

Tengo una lista como esta:

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>

y el siguiente CSS:

ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }

Estoy tratando de forzar que los elementos de la lista se muestren de izquierda a derecha, es decir

 one - two - three - four

Mi problema:
Hacerlo así me da dos filas con dos elementos cada una.

Pregunta:
¿Existe una forma CSS de forzar que todos los elementos de la lista estén en una sola fila para que pueda usar el desplazamiento horizontal? Ahora mismo, si configuro el desbordamiento: automático , solo obtengo barras de desplazamiento verticales, que no quiero.

No quiero poner esto en el div envoltorio. Solo tengo curiosidad por saber si hay una solución CSS que pueda usar solo en la lista.

¡Gracias por la ayuda!

Answer 1

Aquí hay un violín que funciona: http://jsfiddle.net/qnYb5/

CSS relevante:

ul{
    list-style-type:none;
    white-space:nowrap;
    overflow-x:auto;
}

li{
    display:inline;
}

Answer 2

No ha restringido la altura de <ul> , por lo que el navegador es libre de envolver los elementos ''extra'' en su propia línea. Necesitará una height: 1em o lo que sea para asegurarse de que <ul> no pueda crecer más, lo que obliga a todo a desplazarse horizontalmente.

Answer 3

Puede hacerlo con css + javascript, por ejemplo, (http://www.smoothdivscroll.com/v1-2.htm). No creas que hay una solución solo para CSS (que funcionará en varios navegadores).

Answer 4

Realmente no se puede desplazar contenido flotado. Una vez que está flotando, no se calcula en el ancho o alto del contenedor principal de forma predeterminada. Realmente, <ul> se está expandiendo a su ancho establecido y luego no hace nada más.

Eliminando el float: left hará desplazables. El único problema que tendrá entonces es que existe un "espacio" adicional entre cada bloque en línea. Puede eliminar eso eliminando los saltos de línea entre cada elemento de la lista. No es la cosa más bonita. Normalmente usaría un font-size: 0 y luego restablecería el tamaño de fuente en el elemento de la lista.

También debe asegurarse de que los elementos no se ajusten a una nueva línea cuando alcanzan el ancho del elemento.

Ejemplos de jsFiddle:

• Eliminando saltos de línea
• Usando font-size: 0

Answer 5

Utilice overflow-x: scroll; en la div.

Jugar con él here .