强制水平扩展 [英] Force horizontal expansion

问题描述

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

For a sort of thumbnail horizontal sliding viewer

如何使div在水平滚动div中水平滚动div，而不是到达结束和开始一个新行？

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?

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

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

，因此div框强制这样做：

so the div boxes are force to do this:

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

而不是：

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

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

推荐答案

code> float 和 display：inline-block ，并且float不会做它..所以你必须删除浮动规则，（为IE7及以下版本添加一个解决方法*） - 当存在 float 时浏览器忽略 display 属性

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

与白色空间：nowrap 在内部div

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

这篇关于强制水平扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！