CSS不间断左右滚动是网页效果常见的一种,下面我们来看一下如何实现。.scroll-container { overflow-x: scroll; white-space: nowrap; } .sc
CSS不间断左右滚动是网页效果常见的一种,下面我们来看一下如何实现。
.scroll-container { overflow-x: scroll; white-space: nowrap; } .scroll-item { display: inline-block; width: 200px; height: 200px; background-color: #333; margin-right: 20px; }
首先,我们需要给包裹滚动元素的容器加上“overflow-x:scroll”属性,这样容器就可以水平滚动了。紧接着,我们需要给容器内的元素加上“white-space:nowrap”属性,让元素不换行,从而实现水平排列。最后,我们还需要给每个滚动元素添加“display:inline-block”属性,让元素可以水平排列。
以上就是CSS不间断左右滚动的实现方法,需要注意的是,滚动容器的宽度需要根据实际元素宽度和数量做出相应调整。
粉丝
0
关注
0
收藏
0