css不间断左右滚动代码

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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不间断左右滚动的实现方法,需要注意的是,滚动容器的宽度需要根据实际元素宽度和数量做出相应调整。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css不间断左右滚动代码

粉丝

0

关注

0

收藏

0

已有0次打赏