最近在写页面时遇到这样一个效果,一个div里面有四个小的div横向排列,四个小div的宽度加起来超出了屏幕宽度,要求四个小div可以左右横向滑动。代码其实很简单,记录如下:
<div class="scrollTest">
<div class="box" v-for="(item, index) in list"></div>
</div>
.scrollTest{
height: 300px;
white-space: nowrap;
overflow-x: scroll;
// 隐藏滚动条
&::-webkit-scrollbar{
display: none;
}
.box{
display: inline-block;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: 15px;
box-sizing: border-box;
}
}