强制水平扩展

Question

对于一种缩略图水平滑动查看器

如何使水平滚动div中的div强制水平滚动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;
}

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

在内部div上使用white-space: nowrap

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

link