如何創建:可水平滾動的圖片庫
學習如何使用 CSS 創建帶有水平滾動條的圖片庫。
帶有水平滾動條的圖片庫
請使用水平滾動條查看其他圖片:





創建帶有水平滾動條的圖片庫
第一步 - 添加 HTML:
<div class="scroll-container"> <img src="img_5terre.jpg" alt="Cinque Terre"> <img src="img_forest.jpg" alt="Forest"> <img src="img_lights.jpg" alt="Northern Lights"> <img src="img_mountains.jpg" alt="Mountains"> </div>
第二步 - 添加 CSS:
div.scroll-container { background-color: #333; overflow: auto; white-space: nowrap; padding: 10px; } div.scroll-container img { padding: 10px; }
相關頁面
教程:HTML 图像
教程:CSS 設置圖像樣式