Fuerza expansión horizontal

Question

Por una especie de miniatura deslizamiento horizontal espectador

Cómo puedo hacer que los divs dentro de los divs desplazamiento horizontal forzar el div desplazamiento horizontal, en lugar de llegar a la final y comenzar una nueva línea?

Ya estoy usando float: left y display: inline-block pero llegan al final de su contenedor y crean una nueva línea en lugar de forzar el contenedor para que se expanda horizontalmente y así forzar la barra de desplazamiento horizontal

por lo que las cajas son div fuerza para hacer esto:

[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ] 
     <---->scroll 

en lugar de:

[ ][ ][ ][ ] 
[ ][ ][ ][ ] 

código:

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;"> 
    <div style="width: auto;"> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
    <div> 
</div> 


.box{ 
    width: 100px; 
    height: 100px; 
    border: solid 1px black; 
    float:left; 
    display: inline-block; 
} 

Answer 1

que no es necesario float y display:inline-block, flotadores y no lo harán .. así que usted tiene que quitar la regla de flotación, (añadir una solución para IE7 y abajo *) - Cuando está presente float navegadores ignoran la propiedad display

.box{ 
    width: 100px; 
    height: 100px; 
    border: solid 1px black; 
    display: inline-block; 
} 

.box {display: inline !ie7;} /* to make it work in IE7 and below */ 

con white-space: nowrap en el div interior

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;"> 
    <div style="width: auto; white-space: nowrap"> 
etc.. 

Answer 2

Prueba esto:

<div style="width: 200px; height: 100px; overflow: scroll; white-space: nowrap"> 
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO 
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO 
    <span id="a1">BAR!</span> 
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO 
</div> 
<a href="#a1">scroll to bar (HTML anchor)</a> 
<input type="button" value="scroll to bar (JS scrollIntoView)" /> 
<input type="button" value="scroll to bar (JS scrollLeft)" /> 

<script type="text/javascript"> 
    var a1= document.getElementById('a1'); 
    var buttons= document.getElementsByTagName('input'); 

    buttons[0].onclick= function() { 
     a1.scrollIntoView(); 
    }; 
    buttons[1].onclick= function() { 
     a1.parentNode.scrollLeft= a1.offsetLeft; 
    }; 
</script> 

link