html代码 图片横排滚动

在网页制作中，图片横排滚动是一种常见的效果。下面是代码实现：

  div class="scroll-img">
        img src="img1.jpg">
        img src="img2.jpg">
        img src="img3.jpg">
        img src="img4.jpg">
        img src="img5.jpg">
      /div>
      style>
    .scroll-img {
          overflow-x: scroll;
          white-space: nowrap;
          width: 100%;
    }
    .scroll-img img {
          display: inline-block;
          height: 200px;
          margin-right: 10px;
          vertical-align: top;
          width: 300px;
    }
    .scroll-img::-webkit-scrollbar {
          height: 8px;
          width: 8px;
    }
    .scroll-img::-webkit-scrollbar-track {
          background-color: #eee;
    }
    .scroll-img::-webkit-scrollbar-thumb {
          background-color: #ccc;
          border-radius: 8px;
    }
      /style>
    

以上代码中，我们使用了一个div标签容器和多个img标签实现图片横排。通过给容器设置“overflow-x: scroll; ”和“white-space: nowrap; ”属性，使图片能够横向滚动，每张图片通过“margin-right: 10px; ”属性设置右边距离使图片之间产生一定的间距效果。

需要注意的是，我们要给图片一个“display: inline-block; ”属性，使图片呈现为行内块元素，然后通过“vertical-align: top; ”将图片对齐到容器顶部。而另外一个重要的属性是“width: 300px; height: 200px; ”，不同尺寸的图片会导致错位，而造成页面效果不佳。

最后，我们为图片滚动条也添加了一些样式效果，兼容性较好的webkit样式：

  .scroll-img::-webkit-scrollbar {
        height: 8px;
        width: 8px;
  }
  .scroll-img::-webkit-scrollbar-track {
        background-color: #eee;
  }
  .scroll-img::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 8px;
  }
    

以上就是实现图片横排滚动的代码说明，希望对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！