CSS - 在一行中以div显示图像

Question

我在div中有3个图像,我希望它们显示在一行中.来自我当前代码的输出是2个图像是一个单行,另一个是底部.

任何帮助,将不胜感激!

我的HTML代码:

<div id="slider_container">
            <div class="slider">
                <img id="1" src="Kid Playing Guitar_big.jpg" border="0" style="float:left;" />
                <img id="2" src="University Students_big.jpg" border="0" style="float:left;" />
                <img id="3" src="Business Man_big.jpg" border="0" style="float:left;" />
            </div>
            <div class="slider_thumbnails">
                <img id="1" src="Kid Playing Guitar.jpg" border="0" />
                <img id="2" src="University Students.jpg" border="0" />
                <img id="3" src="Business Man.jpg"  border="0" />
            </div>
        </div>

我的CSS代码:

@CHARSET "UTF-8";

        #slider_container{
            height: 360px;
            width: 720px;
        }

        .slider{
            width: 720px;
            height: 360px;
            overflow: hidden;
            background-image: url(loading.gif);
            background-repeat: no-repeat;
            background-position: center;
        }

        .slider img{
            width: 480px;
            height: 360px;
            display: none;
        }

        .slider_thumbnails{
            width: 720px;
            display:inline-block;
        }

        .slider_thumbnails img{
            display: inline-block;
        }

发布答案后请解释一下代码.

Answer 1

.slider_thumbnails{
    width: 720px;
    display:inline-block;
    white-space:nowrap;
}