cómo mostrar una barra de desplazamiento horizontal

Tengo un artículo #items div que envuelve un montón de .item . Quiero mostrar los elementos uno al lado del otro y, si superan el ancho de la página, muestra una barra de desplazamiento horizontal.

 
Item content

Probé algo como esto pero no funciona

 #items{ overflow: auto; width:100%; height:200px; /* this is the height of each item*/ } .item{ float:left; } 

Pensé que esta era la forma de hacerlo, pero no puedo hacer que esto funcione bien, así que estoy abierto a correcciones y otras formas también.

Está en el camino correcto, pero necesitará un envoltorio adicional para que funcione …

 
Item content

y luego su CSS:

  #scrollable { overflow: auto; width:100%; height:200px; } #items { width: 3000px; /* itemWidth x itemCount */ } .item{ float:left; } 

Esta pregunta anterior puede ayudar: elemento CSS div: ¿cómo mostrar solo las barras de desplazamiento horizontal?

Así que en lugar de su css actual, cámbielo a:

 #items{ overflow-x: scroll; overflow-y: auto; width:100%; height:200px } .item{ float:left; } 

Intenta eso y ajústalo si es necesario.

Esta pregunta está relacionada con / how-to-force-horizont-scrolling-in-an-html-list-using-css donde el animuson explicó que los elementos flotantes no se pueden medir.

 #items{ overflow: auto; white-space: nowrap; width:100%; height:200px } .item{ display: inline-block; } 

Y el mismo jsfiddle.

Preferiría que no proporciones ancho para #items. En mi caso, el número de .item fue dynamic y sumrlos no era mi preferencia.

 #items{ overflow: auto; white-space:nowrap; } .item { display:inline; }