功能由來
近期在做一個H5需要一個橫向滾動條，查看了一些文檔最后還是決定自己寫一個，一個可以兼容Mobile、PC的。
HTML
<body>
<div class="nav">
<a href="#">Nav1</a>
<a href="#">Nav2</a>
<a href="#">Nav3</a>
<a href="#">Nav4</a>
<a href="#">Nav5</a>
<a href="#">Nav6</a>
<a href="#">Nav7</a>
<a href="#">Nav8</a>
<a href="#">Nav9</a>
<a href="#">Nav10</a>
<a href="#">Nav11</a>
<a href="#">Nav12</a>
<a href="#">Nav13</a>
<a href="#">Nav14</a>
<a href="#">Nav15</a>
</div>
<div>
內(nèi)容區(qū)域
</div>
</body>
CSS
.nav {
width: 100%;
height: 50px;
line-height: 50px;
/*段落中文本不換行*/
white-space: nowrap;
/*陰影*/
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
/*設(shè)置橫向滾動*/
overflow-x: scroll;
/*禁止縱向滾動*/
overflow-y: hidden;
/*文本平鋪*/
text-align: justify;
/*背景顏色*/
background: #F4F5F6;
padding: 0px 5px;
margin-bottom: 10px;
/*設(shè)置邊距改變效果為內(nèi)縮*/
box-sizing: border-box;
}
.nav a {
color: #505050;
/*取消超鏈接下劃線*/
text-decoration: none;
margin: auto 10px;
}
.nav::-webkit-scrollbar {
/*隱藏滾動條*/
display: none;
}
這樣就實現(xiàn)了橫向滾動導(dǎo)航是不是很簡單
到此這篇關(guān)于CSS實現(xiàn)移動端橫向滾動導(dǎo)航條(PC端也適用)的文章就介紹到這了,更多相關(guān)CSS橫向滾動導(dǎo)航條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
