html - 没有列表的水平滚动图像行

Question

我想在（较小的）容器 div 中创建一个带有缩略图的可滚动行。

如果不将 img 包装在列表中，这可能吗？我试过了

float:left
display: inline-block;

对于图像

和/或

overflow: auto;

在容器 div 中。

但是 div 出现在一列中，并且没有出现水平滚动条（仅在使用溢出时垂直滚动：自动）。

jsfiddle：http: //jsfiddle.net/8qJSr/1/

Answer 1

通过将图像保存在一个在外包装内滚动的包装内，您可以很容易地实现这一点。

jsfiddle链接：这里；

的HTML：

 <div id="wrapper">
   <div id="innerwrapper">
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
   </div>
 </div>​

CSS：

#wrapper { height: 100px; overflow: auto; width: 500px; overflow-y: hidden;}
img {height: 100px; width: 200px;float: left;}
#innerwrapper { width: 1200px;}​

Answer 2

如果您将图像包含在一个椭圆形的 div 中，那么上面的 css 应该可以工作。

Answer 3

float:left;会正常工作。对于这样的标记

<div id="collection">
   <img ... />
   ...
</div>

CSS

#collection {
    height: 200px;
    overflow: auto;
}
#collection img { float:left }