Форсировать горизонтальное расширение

Для просмотра миниатюр с горизонтальным скользящим просмотром

Как я могу сделать div внутри горизонтальных прокручивающих divs, чтобы прокручивать div горизонтально, а не достигать конца и начинать новую строку?

Я уже использую float: left и display: inline-block, но они достигают конца своего контейнера и создают новую строку вместо того, чтобы заставлять контейнер расширяться горизонтально, чтобы соответствовать им, и, таким образом, принудительно использовать горизонтальную полосу прокрутки

поэтому поля div должны сделать это:

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

вместо:

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

код:

<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;
}

Ответ 1

Вам не нужны float и display:inline-block, а float не будут делать этого.. поэтому вам нужно удалить правило с плавающей запятой (добавьте обходной путь для IE7 и ниже *) - Когда float существующие браузеры игнорируют свойство 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 */

с white-space: nowrap на внутреннем div

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

Ответ 2

Попробуйте следующее:

<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>

ссылка