水平對齊圖像？

Question

我正在創建一個圖像滑塊，一次只顯示2張圖像，左右兩個箭頭才能移動圖像，我必須水平放置圖像，但是只有兩個圖像是內嵌的，而其他圖像則是下降的，我將圖片容器的溢出設置為隱藏，無法設置容器的寬度，因為圖片數量可能會非常動態

所以我該如何水平設置所有圖像（屏幕上有2張圖像，由於容器屬性overflow：hidden隱藏了其他圖像）

藍色是容器，綠色框是圖像。

碼

        <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;
}

檢查小提琴http://jsfiddle.net/SNeVH/1/