强制水平扩展

Question

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

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

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

与white-space: nowrap内在的div

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