這篇文章給大家分享的是有關(guān)css實現(xiàn)橫向滾動條的案例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

10年積累的網(wǎng)站制作、成都網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有武夷山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

html代碼：

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">全部</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微軟</li>
        <li class="nav_item">會計</li>
        <li class="nav_item">繪畫</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微軟</li>
        <li class="nav_item">會計</li>
        <li class="nav_item">繪畫</li>
    </ul>
</div>
<script src="node_modules/jQuery/tmp/jquery.js"></script>

一、 原始css + jquery 實現(xiàn)橫向滾動條（原生js可以實現(xiàn)，為了方便才用的jQuery）

css代碼：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
.nav_wrap{
    overflow-x: scroll;
}
.nav_mine {
    padding: 15px 10px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.nav_mine .nav_item {
    border: 1px solid #1a110b;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 10px;
    font-size: 24px;
    padding: 4px 18px;
    float: left;
    list-style: none;
}

js代碼：

$(function(){
    var width = 0;
    for (let i = 0; i < $('.nav_item').length; i++) {
        width += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20);  //width只是內(nèi)容的寬度，需要加上padding的寬度
})

PS：為什么用js，是因為不知道tabs有多少個，不能把寬度寫死，只能動態(tài)獲取tabs的寬度，然后相加，獲取總寬度，方便多次使用。outerWidth加上參數(shù)true，代表包含了padding+margin+border的寬度。

二 css3  --  flex

css代碼：

* {
    box-sizing: border-box;
}

.nav_mine {
    padding: 15px 20px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    border: 1px solid #aca9a7;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 22px;
    font-size: 24px;
    padding: 4px 18px;
    list-style: none;
    white-space: nowrap;
}

對于white-space，item在沒有用white-space:nowrap時，發(fā)現(xiàn)一個問題，在未設(shè)定寬度的情況下，一個單詞不會換行，而漢字會換行，認(rèn)為是和display:flex有關(guān)系，上網(wǎng)查閱，才知道：white-space是看空格來識別是否換行的，單詞是作為一個字符，所以要針對于漢字和英文，都要設(shè)置white-space:nowrap不換行。因為漢字和英文的不同，導(dǎo)致所占的寬度不一致，所以要留1到2個像素。

感謝各位的閱讀！關(guān)于css實現(xiàn)橫向滾動條的案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文標(biāo)題：css實現(xiàn)橫向滾動條的案例-創(chuàng)新互聯(lián)
分享地址：http://chinadenli.net/article40/ecoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計、App開發(fā)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)