Сила горизонтального расширения

Question

Для просмотра миниатюрных горизонтальных слайдеров

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

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

, поэтому ящики для деления вынуждены делать это:

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

Answer 1

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

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

ссылка