CSS实现移动端横向滚动导航条

HTML与CSS实现滚动导航栏

最新推荐文章于 2024-09-11 09:01:19 发布

原创最新推荐文章于 2024-09-11 09:01:19 发布 · 415 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍如何使用HTML和CSS实现一个具有水平滚动功能的导航栏，通过设置特定样式属性，如white-space、overflow及box-shadow等，使得导航栏在内容超出显示范围时能够自动出现滚动条，并且隐藏了滚动条的显示。

HTML代码如下：

		`<div class="nav">
				<a href="#">关注</a>
		        <a href="#">推荐</a>
		        <a href="#">新闻</a>
		        <a href="#">社会</a>
		        <a href="#">国际</a>
		        <a href="#">军事</a>
		        <a href="#">娱乐</a>
		        <a href="#">三农</a>
		        <a href="#">直播</a>
		        <a href="#">小视频</a>
		        <a href="#">问答</a>
		        <a href="#">体育</a>
		        <a href="#">科技</a>
	    </div>`

CSS代码如下：

<style>
				        .nav {
				            width: 100%;
				            height: 50px;
				            line-height: 50px;
				            /*段落中文本不换行*/
				            white-space: nowrap;
				            /*阴影*/
				            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
				            /*设置横向滚动*/
				            overflow-x: scroll;
				            /*禁止纵向滚动*/
				            overflow-y: hidden;
				            /*文本平铺*/
				            text-align: justify;
				            /*背景颜色*/
				            background: #F4F5F6;
				            padding: 0px 5px;
				            margin-bottom: 10px;
				            /*设置边距改变效果为内缩*/
				            box-sizing: border-box;
				        }
				        .nav a {
				            color: #505050;
				            /*取消超链接下划线*/
				            text-decoration: none;
				            margin: auto 10px;
				        }
				
				        .nav::-webkit-scrollbar {
				            /*隐藏滚动条*/
				            display: none;
				        }
				   </style>