How to Horizontally Scroll Images In Single Line [duplicate]

Question

I am trying to create a sort of basic carousel of images. My question is: how can I get all my slides to display in one line and get them to scroll horizontally instead of vertically?

Here is an example: 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

Simply add 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>