如何創建:可水平滾動的圖片庫

學習如何使用 CSS 創建帶有水平滾動條的圖片庫。

帶有水平滾動條的圖片庫

請使用水平滾動條查看其他圖片:

Wuhan Beijing Shenzhen Hangzhou Shanghi

親自試一試

創建帶有水平滾動條的圖片庫

第一步 - 添加 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 設置圖像樣式