0
点赞
收藏
分享

微信扫一扫

【Css】Css实现div卡片【横向滑动】效果(图文+完整源代码)


【Css】Css实现div卡片【横向滑动】效果(图文+完整源代码)_css

 代码:

<body>
<div class="box">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
</body>

<style>

.box{
height:300px;
background: #eee;
padding: 10px 0;
white-space: nowrap; /* 禁止超出自动换行 */
overflow-y:auto; /* 横向滑动 */
}
/*隐藏下面的滚动条*/
.box::-webkit-scrollbar{
display: none;
}

.card{
width: 300px;
height: 300px;
background: rgb(223, 223, 223);
display: inline-block; /*行内块元素*/
border-right:5px rgb(255,255,255) solid;
font-size: 25px;
text-align: center;
line-height: 300px;
}
</style>


举报

相关推荐

0 条评论