HTML/CSS
通过css在网页中实现容器内元素横向滚动
PetitQ
网页中元素默认是纵向排列的，我们可以通过 css 属性将容器内子元素实现横向排列，超出隐藏，并可以横向滚动。
基础结构如下:
也想出现在这里？联系我们吧
<div class="scroll-box"><div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
.
.
.
</div>
item 可以根据实际需要增加更多
横向浮动，隐藏，滑动相关 css 如下:
.item {
width: 100px;
height: 60px;
line-height: 60px;
white-space: nowrap;
display: inline-block;
}.scroll-box {
text-align: center;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
如果需要隐藏滚动条，通过控制伪类，增加以下 css 即可
.scroll-box::-webkit-scrollbar {
display: none;
}
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
