如何创建：可水平滚动的图片库

学习如何使用 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 设置图像样式