力量水平扩张[英] Force horizontal expansion

本文是小编为大家收集整理的关于力量水平扩张的处理方法,想解了力量水平扩张的问题怎么解决?力量水平扩张问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

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

如何使水平滚动divs内部的div施加压力,而不是达到末端并启动新线?

我已经在使用float:左和显示:内联砌块,但它们到达容器的末端并制作一条新线,而不是强迫容器水平扩展以适合它们,从而迫使需要水平滚动栏/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;
}

推荐答案

您不需要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..

其他推荐答案

尝试以下方法:

<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

本文地址:https://www.itbaoku.cn/post/565920.html