css5图片滚动 |图片之间有缝隙 css

代码实现如下：
HTML代码：
<div class="scroll-container">
<ul class="scroll-list">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
</ul>
</div>
CSS代码：
.scroll-container {
width: 100%;
overflow: auto;
white-space: nowrap;
}
.scroll-list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.scroll-list li {
display: inline-block;
margin-right: 10px;
}

以上代码中，HTML部分包含一个div容器，其中包含了一个ul列表，列表中包含了多个li元素，每个li元素里面包含了一个img图片。CSS中，大家为.scroll-container设置了宽度100%、overflow:auto、white-space:nowrap属性，分别表示宽度为100%、溢出时显示滚动条，不换行。.scroll-list设置display:inline-block、list-style:none、margin:0、padding:0属性，分别表示显示为行内块元素、无序列表样式、外边距、内边距都为0。.scroll-list li设置了display:inline-block、margin-right:10px属性，表示显示为行内块元素、右侧包含10像素的外边距。

CSS5图片滚动效果的实现比较简单，工程师只需要掌握好上述HTML和CSS代码，就可以轻松地实现想要的效果。在实际项目中，可以根据需求不断地调整样式，打造出更加美观、高效的图片滚动效果。