使图像彼此隐藏

Question

我正在尝试制作一个图像滚动条，但我仍然坚持使用我的CSS方面。我现在拥有的CSS正在让它们互相攻击而不是彼此相邻，我无法弄清楚如何让它以这种方式工作。

图像存储在div中，div位于另一个名为imageScroller的div下，imageScroller div位于Content div下。

以下是div的CSS

#content
{
    text-align: center;
    padding: 20px;
}
#imageScroller{
    margin: 0 auto;
    width: 850px;
    height: 250px;
    overflow: hidden;
}
.image{
    float: left;
}

Answer 1

我认为您想要的是通过将white-space: nowrap添加到#imageSlider并更改.image来实现，而不是float: left，而是display: inline-block。

这里是fiddle。根据需要进行调整。

font-size: 0中的#imageSlider是为了消除<div>之间的额外空白。