这篇文章主要介绍css如何实现元素横向滚动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
分析：
子元素的宽度大于父元素时会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，根据需求这里采用水平横向滚动。
html代码：
计算
安全
数据库
网络和加速
企业服务
<div class="content">
<div class="content-list">
<div class="item" style="margin-right:10px;">
<div class="amount">
<span>2</span>元
</div>
<div class="fundInfo">
<p class="name">XXXXXX</p>
<p>满1000元可用</p>
</div>
</div>
<div class="item" style="margin-right:10px;">
<div class="amount">
<span>2</span>元
</div>
<div class="fundInfo">
<p class="name">XXXXXX</p>
<p>满1000元减200</p>
</div>
</div>
</div>
</div>主要的css代码：
.content {
width: 100%;
overflow-x: scroll; // 子元素的宽度大于父元素的即可滚动
overflow-y: hidden;
border-radius: 4px;
}
.content::-webkit-scrollbar {
display:none
} // 隐藏滚动条
.content-list{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left; // 使其脱离文档流 宽度为所有字元素的和
min-width: 100%;
}
.item {
width: 150px;
height: 50px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex: 3;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 10px;
}以上是“css如何实现元素横向滚动”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
