在網頁設計中，經常需要將多個圖片橫向排列。HTML提供了多種方法來實現這個效果，下面我們將介紹一種基于HTML的方法，通過代碼可以實現圖片的橫向排列。

<div>
<img src="pic1.jpg" width="100px">
<img src="pic2.jpg" width="100px">
<img src="pic3.jpg" width="100px">
<img src="pic4.jpg" width="100px">
</div>

上述代碼中，使用了<div>標簽來包裹四個<img>標簽。接著，我們通過給圖片設置寬度的方式，讓四張圖片等比例縮放到100像素寬。

在實驗過程中，如果希望讓每個圖片之間有一定的間距，則可以通過CSS樣式表來實現。

<style>
div {
display: flex;
justify-content: space-between;
}
img {
margin-right: 10px;
}
</style>

上述代碼中，我們通過CSS樣式表定義了一個flex容器，然后使用“justify-content: space-between”屬性來讓圖片與圖片之間均分容器的剩余空間，從而達到橫向排列的效果。同時，我們給每個圖片設置了“margin-right: 10px;”的屬性，讓圖片之間有10像素的間距。

通過上述代碼，我們就可以實現簡單的橫向排列效果。當然，在實際應用中，我們還可以進一步優化代碼，添加更多的樣式和屬性，來擴展圖片橫向排列的功能和效果。