强制水平扩展

发布于 2024-11-02 13:04:33 字数 1030 浏览 3 评论 0原文

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

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

原文

For a sort of thumbnail horizontal sliding viewer

How can I make the divs inside the horizontal scrolling divs force the scrolling div horizontally, instead of reaching the end and starting a new line?

I am already using float: left and display: inline-block but they reach the end of their container and make a new line instead of forcing the container to expand horizontally to fit them and thus forcing the horizontal scrollbar to be needed

so the div boxes are force to do this:

[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
      <---->scroll

instead of:

[ ][ ][ ][ ]
[ ][ ][ ][ ]

code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

み青杉依旧 2024-11-09 13:04:33

您不需要 float 和 display:inline-block，并且 float 不会这样做..所以您必须删除 float 规则，（添加解决方法IE7 及以下 *) - 当存在 float 时，浏览器会忽略

.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 的display 属性

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
     <div style="width: auto; white-space: nowrap">
etc..

You don't need float and display:inline-block, and floats won't do it.. so you have to remove the float rule, (add a workaround for IE7 and below *) - When float is present browsers ignore the display property

.box{
    width: 100px;
    height: 100px;
    border: solid 1px black;
    display: inline-block;
}

.box {display: inline !ie7;} /* to make it work in IE7 and below */

with white-space: nowrap on the inner div

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
     <div style="width: auto; white-space: nowrap">
etc..

回复收藏 0 原文

九歌凝 2024-11-09 13:04:33

试试这个：

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

链接

Try this:

<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

回复收藏 0 原文

~没有更多了~