实现横向滚动效果但是不出现滚动条
如代码设置了一个模块的导航,以下是完整html和css代码
<div class="nav">
<ul>
<li class="one"><a href="">每日推荐</a><img src="./images/路径 17750@2x.png" alt="" class="oneimg"></li>
<li><a href="">新品速递</a></li>
<li><a href="">精彩测评</a></li>
<li><a href="">资讯</a></li>
<li><a href="">全新</a></li>
</ul>
</div>
.nav {
width: 94.6667vw;
overflow-x: auto;
margin: 0 auto;
}
.nav::-webkit-scrollbar {
display: none;
}
.nav ul {
height: 13.0667vw;
display: flex;
justify-content: space-between;
align-items: center;
width: max-content;
flex-wrap: nowrap;
}
.nav ul li {
margin-right: 10vw;
}
.nav ul li:last-child {
margin-right: 0;
}
.nav ul a {
color: #999999;
}
.nav ul .one {
position: relative;
}
.nav ul .one a {
color: #333333;
}
.nav ul .one .oneimg {
position: absolute;
top: 6vw;
left: 6vw;
width: 4vw;
height: 0.8vw;
}
具体过程
首先我们给最外层盒子设置一个宽度用于版心居中,然后通过 overflow-x: auto; 实现横向滚动效果,接着我们给ul列表设置样式
.nav ul {
height: 13.0667vw;
/* 设置flex布局 */
display: flex;
justify-content: space-between;
/* 实现内容在垂直方向居中 */
align-items: center;
/* 实现ul宽度由内容撑开 */
width: max-content;
/* 内容不换行显示 */
flex-wrap: nowrap;
}
此时我们发现每个li的内容紧贴在一起,是因为没有给li单独设置外边距,设置外边距撑开ul达到效果,其他样式可自行设置
.nav ul li {
margin-right: 10vw;
}
.nav ul li:last-child {
margin-right: 0;
}
最后给整个大盒子nav设置样式隐藏滚动条
/* 设置浏览器中隐藏滚动条 */
.nav::-webkit-scrollbar {
display: none;
}
整体效果