html - 水平对齐图像？

Question

我正在创建一个图像 slider ，一次只显示 2 张图像，左右有两个箭头可以移动图像，我必须水平放置图像，但只有两张图像是内嵌的，其他图像正在下降，我将溢出隐藏到图像容器，我无法设置容器的宽度，因为图像的数量可能非常动态

那么我怎样才能水平设置所有图像(屏幕上有 2 个图像，其他图像被隐藏为容器属性溢出:隐藏)

蓝色是容器，绿色框是图像。

代码

        <div id="slidearea">
<div id="slider">

        <img alt="image" id="0" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5; border-color: rgb(255, 255, 255);">

        <img alt="image" id="1" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="2" src="images/thum-3.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="3" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="4" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="5" src="images/thum-3.jpg" style="opacity: 0.5;">
        </div>
        </div>

Answer 1

您可以使用 white-space 和 inline-block 属性来做到这一点。

例如像这样:

#container{
    overflow:hidden;
    width:300px;
    margin:30px auto;
    background:yellow;
}
#container #slider{
    white-space:nowrap;
}
img{
    opacity:0.5;
    display:inline-block;
    *display:inline;/*IE*/
    *zoom:1;/*IE*/
    background:red;
}

检查 fiddle http://jsfiddle.net/SNeVH/1/