css横向滚动轴,CSS—移动端导航（div）横向滑动，并消除横向滚动轴（图文详情）...

CSS—移动端导航横向滑动，并消除横向滚动轴

假设我写了一个导航(div照样适用)

• 学习
• 学习
• 学习
• 学习
• 学习
• 学习
• 学习
• 学习

第一步：css样式

ul{

width: 100%;

height: 76/@r;

white-space: nowrap;

overflow-x: scroll;

// 重点就是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

}

这时横向滚动轴就消失了，并且可以横向滑动

标签：滚动,space,overflow,横向,学习,div,white,CSS

来源： https://blog.csdn.net/Poppy_LYT/article/details/98507683