cómo mostrar una barra de desplazamiento horizontal

Question

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

<div id="somediv"></div> 

<div id="items"> 
    <div class="item"> 
    Item content 
    </div> 
</div> 

<div id="someotherdiv"></div> 

he intentado 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 manera de hacerlo, pero no puedo conseguir que esto camino al trabajo, así que estoy abierto a correcciones y otras formas también.

Answer 1

Esta pregunta anterior puede ayudar: CSS div element - how to show horizontal scroll bars only?

Así que en lugar de su actual css, cambie a:

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

Intenta que y ajustar si es necesario.

Answer 2

Está en el camino correcto, pero se necesita y la envoltura adicional para hacer que funcione ...

<div id="scrollable"> 
<div id="items"> 
    <div class="item"> 
    Item content 
    </div> 
</div> 
</div> 

y luego tu CSS:

#scrollable { 
     overflow: auto; 
     width:100%; 
     height:200px; 
    } 

    #items { 
    width: 3000px; /* itemWidth x itemCount */ 
    } 

    .item{ 
    float:left;  
    } 

Answer 3

Esta pregunta se relaciona con /how-to-force-horizontal-scrolling-in-an-html-list-using-css donde animuson explicó que los elementos flotados no se pueden medir.

#items{ 
overflow: auto; 
white-space: nowrap; 
width:100%; 
height:200px 
} 

.item{ 
display: inline-block; 
} 

Y lo mismo jsfiddle

Answer 4

yo preferiría que no proporciona el ancho de #items. En mi caso, el número de .item era dinámico y sumarlos no era de mi preferencia.

#items{ 
      overflow: auto; 
      white-space:nowrap; 
     } 

.item {    
      display:inline; 
     }