如何在单行中水平滚动图像

Question

我正在尝试创建一种基本的图像轮播。我的问题是：如何让我的所有幻灯片在一行中显示并让它们水平滚动而不是垂直滚动？

以下是一个示例：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;
}

Answer 1

只需添加white-space: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>

Answer 2

查看类似的问题：CSS horizontal scroll