我正在尝试创建一种基本的图像轮播.我的问题是：如何让我的所有幻灯片在一行中显示并让它们水平滚动而不是垂直滚动？
这是一个例子：http://jsfiddle.net/3f7fcspL/
HTML：
<div id="carousel">
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
</div>
CSS：
#carousel {
width: 100%;
height: 150px;
background-color: #ff0000;
overflow: auto;
}
#carousel .slide {
display: inline-block;
}
解决方法
只需添加白色空间：nowrap
#carousel {
width: 100%;
height: 150px;
background-color: #ff0000;
overflow: visible;
white-space:nowrap;
}
#carousel .slide {
display: inline-block;
}
<div id="carousel">
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
</div>
