CSS實現移動端橫向滾動導航條，仿今日頭條滾動導航

應用場景

現在很多移動端的橫向導航都是實現了滾動效果，我們先來看幾個案例：
今日頭條

b站

代碼實現

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>
<div>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
</div>

CSS代碼：

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

演示效果：