13

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

如何使水平滚动 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;
}
4

2 回答 2

24

您不需要floatand 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..
于 2011-04-21T11:15:16.163 回答
1

试试这个：

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

关联

于 2011-04-21T11:13:36.043 回答