主頁 > 知識庫 > CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)

CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)
熱門標簽：漯河外呼調研線路 旅游地圖標注線路 廣西房產智能外呼系統(tǒng)推薦 電銷專用外呼線路 地圖標注位置怎么弄圖 電話機器人鑰匙扣 電銷外呼系統(tǒng)是違法的嗎 威力最大的電銷機器人 400電話唐山辦理

功能由來

近期在做一個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>
        內容區(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);
    /*設置橫向滾動*/
    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;
}

這樣就實現(xiàn)了橫向滾動導航是不是很簡單

到此這篇關于CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)的文章就介紹到這了,更多相關CSS橫向滾動導航條內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

標簽：綏化 湘西 焦作 試駕邀約 無錫 欽州 銅陵 湖北

巨人網絡通訊聲明：本文標題《CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)》，本文關鍵詞  CSS,實現(xiàn),移動,端,橫向,滾動,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)》相關的同類信息！
  • 本頁收集關于CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)的相關信息資訊供網民參考！
    • 推薦文章