nav菜单横向滚动隐藏滚动条

小-黑

于 2019-08-18 23:53:42 发布

阅读量957

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/HJSJR/article/details/99711345

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现的滚动导航栏布局方法，通过调整padding和margin属性，结合overflow-x:scroll属性，使导航栏能够在内容超出显示宽度时水平滚动，同时保持整洁的底部边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法

.scroll {
	padding-bottom: 10px;
	margin-bottom: -10px;
}

附案例

html

<div id="slider" class="slider">
     <nav class="scroll">
        <a class="control-item active" href="#">推荐</a>
        <a class="control-item" href="#">热点</a>
        <a class="control-item" href="#">北京</a>
        <a class="control-item" href="#">社会</a>
        <a class="control-item" href="#">娱乐</a>
        <a class="control-item" href="#">科技</a>
	</nav>
</div>

css

.slider {
	widows: 100%;
	line-height: 40px;
	overflow: hidden;
}
.scroll {
	overflow-x: scroll;
	padding-bottom: 10px;
	margin-bottom: -10px;
	white-space: nowrap;
}
.control-item {
	display: inline-block;
	width: 100px;
	text-align: center;
}