Question

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

如何使水平滚动div内的div强制滚动div水平，而不是到达结尾并开始换行？

我已经在使用float：left和display：inline-block但它们到达容器的末尾并创建一个新行，而不是强制容器水平扩展以适应它们，从而强制需要水平滚动条< / p>

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

强制水平扩展

2 个答案: