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

最新推荐文章于 2024-05-26 09:15:42 发布

小-黑

最新推荐文章于 2024-05-26 09:15:42 发布

阅读量957

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

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

web前端专栏收录该内容

3 篇文章

订阅专栏

方法

.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;
}