在Web頁(yè)面設(shè)計(jì)中，經(jīng)常需要用到橫排的圖片。那么該如何用CSS來(lái)實(shí)現(xiàn)呢？下面我們來(lái)介紹一下具體的方法。

.thumbnail{
display: inline-block; /*將元素設(shè)置為塊級(jí)元素，并使其在同一行內(nèi)排列*/
width: 200px; /*設(shè)置圖片的寬度*/
height: 200px; /*設(shè)置圖片的高度*/
margin-right: 20px; /*設(shè)置右邊距*/
vertical-align: top; /*將圖片向上對(duì)齊*/
}

以上代碼中，我們首先為元素設(shè)置了display:inline-block屬性，將其設(shè)置為塊級(jí)元素，使其在同一行內(nèi)排列。然后，我們分別設(shè)置了圖片的寬度、高度和右邊距，以便對(duì)圖片進(jìn)行排列。同時(shí)，我們還需要使用vertical-align屬性，將圖片向上對(duì)齊。

接下來(lái)，我們需要在HTML文件中將圖片進(jìn)行排列。這里我們以展示三張圖片為例：

<div class="pictures">
<img src="picture1.jpg" class="thumbnail">
<img src="picture2.jpg" class="thumbnail">
<img src="picture3.jpg" class="thumbnail">
</div>

以上代碼中，我們首先在一個(gè)名為pictures的div元素中展示了三張圖片，并為這些圖片使用了剛剛定義的.thumbnail類。

通過(guò)使用CSS中的display:inline-block、width、height、margin-right和vertical-align屬性，我們就可以輕松地在Web頁(yè)面中顯示橫排的圖片了。