html图片横向滚动

要实现HTML图片横向滚动，可以使用CSS属性来控制图片容器的宽度和滚动行为。首先，我们需要创建一个包含图片的容器。

在CSS中，使用样式选择器来选中图片容器，并设置其宽度、高度以及`overflow`属性为`scroll`。设置宽度是为了限制容器的宽度，而设置`overflow: scroll`则会显示滚动条。

例如，假设我们有一个包含5张图片的横向滚动容器：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
</div>

然后，在CSS中为图片容器添加样式：

.image-container {
  width: 100%;
  height: 200px; /* 调整高度以适应您的需求 */
  overflow: scroll;
  white-space: nowrap;
}

.image-container img {
  width: auto;
  height: 100%;
  display: inline-block;
}

上述代码中，`white-space: nowrap`属性用于防止图片换行显示。`.image-container img`样式设置了图片的宽度为自适应，高度为100%，并将其显示为`inline-block`，使得图片能够在同一行水平显示。

这样，当图片的宽度超出容器的宽度时，就会显示横向滚动条。用户可以通过滚动条来水平滚动查看所有的图片。

希望以上回答能够帮到您。