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

Question

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

这可能没有包装在列表中的img？我试图与

float:left 
display: inline-block; 

为图像

和/或

overflow: auto; 

在div容器。

但div出现在一列中，没有出现水平滚动条（只有在使用overflow：auto时才垂直）。

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

Answer 1

通过保持其外包装内滚动的包装内的图像，你可以很容易地做到这一点。

jsfiddle链接：here;

的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

如果包含一个椭圆形格内的图像，然后上面的CSS应该工作。

Answer 3

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

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

CSS

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