假设用列表
<ul>
<li>学习</li>
<li>学习</li>
<li>学习</li>
<li>学习</li>
<li>学习</li>
<li>学习</li>
<li>学习</li>
<li>学习</li>
</ul>
第一步:css样式
ul{
width: 100%;
height: 76/@r;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
// 一定要加上overflow-y:hidden,不然还可以上下滑动
// 重点就是white-space 和 overflow-x的设置,
//white-space是为了不折行
// overflow-x: scroll是为了出现滚动轴
display: flex;
align-items: center;
padding: 0 30/@r;
box-sizing: border-box;
li{
flex: 1;
text-align: center;
margin-right: 50/@r;
}
}
效果:这个时候会发现出现了横向滚动轴
第二步:消除横向滚动轴
ul::-webkit-scrollbar {
display:none
}
效果:滚动轴消失