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

【问题标题】：Horizontal scrollable images row without list没有列表的水平滚动图像行
【发布时间】：2012-04-04 13:06:16
【问题描述】：

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

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

float:left
display: inline-block;

图片

和/或

overflow: auto;

在容器 div 中。

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

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

【问题讨论】：

您是否给包含div 的内容提供了固定大小？另外，你可能想要overflow: scroll-x;
您在浮动语句的末尾错过了;。（当您有 inline-block 用于您的目的时，您甚至需要 float 吗？）
div的大小是固定的，我加了overflow-x:scroll;overflow-y:hidden。现在我看到一个水平滚动条，但它被禁用，图像仍然垂直对齐而不是水平对齐。汤姆：;是一个错字。删除浮动没有帮助。
CSS div element - how to show horizontal scroll bars only?的可能重复

标签： html css

【解决方案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;}

【讨论】：

工作，但这是很多包装器：/
我更新了它，它只是一个包含所有 img 标签的包装器 c:
好的，它工作。可以简化一点删除显示：inline-block；和位置：相对。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

CSS

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

【讨论】：