css實現圖片橫向排列滾動效果

本文主要主要介紹css實現圖片橫向排列滾動效果,需要的朋友可以參考下，希望能幫助到打大家。

具體程式碼如下所示：

.imageList{
        overflow-x: auto;
        overflow-y: hidden;
        height:180px;
        white-space: nowrap;
      img{
        width:auto;
        height:100%;
        margin-right:10px;
      }
 }

#

<p class="imageList">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>
    <img src="1.jpg"/>
</p>

##這裡注意，img標籤不能左浮動，外層容器必須加不換行

white-space: nowrap;

相關推薦：

##javascript實作非同步圖片上傳方法實例

CSS3圖片混合怎麼使用

如何用CSS做圖片旋轉效果

以上是css實現圖片橫向排列滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！