cómo forzar el desplazamiento horizontal en una lista HTML utilizando CSS?

Question

que tienen 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 a los elementos de la lista para mostrar de izquierda a derecha, es decir

one - two - three - four 

Mi problema:
Haciéndolo así me da dos filas con dos artículos cada uno.

Pregunta:
¿Hay una manera de CSS para obligar a los elementos de la lista a todos en una sola fila para que pueda utilizar el desplazamiento horizontal? En este momento si establezco el desbordamiento : auto Solo estoy obteniendo barras de desplazamiento verticales, que no quiero.

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

¡Gracias por la ayuda!

Answer 1

No se puede desplazar realmente el contenido flotante. Una vez que está flotando, no se calcula en el ancho o la altura del contenedor principal de forma predeterminada. Realmente, el <ul> se está expandiendo al ancho establecido y luego no hace nada más.

Al eliminar el float: left, se podrán desplazar. El único problema que tendrás entonces es que existe el "espacio" extra 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 artículos no se ajustan a una nueva línea cuando alcanzan el ancho del elemento.

Ejemplos jsFiddle:

• Removing line breaks
• Using font-size: 0

Answer 2

No ha restringido la altura del <ul>, por lo que el navegador puede colocar los elementos "adicionales" en su propia línea. Necesitará un height: 1em o lo que sea para asegurarse de que el <ul> no puede ser más alto, obligando a que todo se desplace horizontalmente.

Answer 3

Puede hacerlo con css + javascript, p. Ej. (http://www.smoothdivscroll.com/v1-2.htm). No crea que hay un sulution solo de CSS (que funcionará en varios navegadores).

Answer 4

Uso overflow-x: scroll; en el div.

Fiddle con él here.

Answer 5

Aquí es un violín de trabajo: http://jsfiddle.net/qnYb5/

CSS relevante:

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

li{ 
    display:inline; 
}