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

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