แบบที่จะทำ: คลังรูปภาพที่สามารถเลื่อนเชื่อมระหว่างแบบตรง

เรียนรู้ว่าจะทำเช่นไรเพื่อสร้างคลังรูปภาพที่สามารถเลื่อนเชื่อมระหว่างแบบตรง

สร้างคลังรูปภาพที่สามารถเลื่อนเชื่อมระหว่างแบบตรง

ขั้นที่ 1 - เพิ่ม HTML:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="ป่า">
  <img src="img_lights.jpg" alt="แสงดวงพุธ">
  <img src="img_mountains.jpg" alt="เทือกเขา">
</div>

ขั้นที่ 2 - เพิ่ม CSS:

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

ทดลองด้วยตัวเอง

หน้าที่เกี่ยวข้อง

ตัวอย่าง:HTML 图像

ตัวอย่าง:CSS ตั้งค่ารูปภาพ