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

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>

成品效果演示如下：