水平スクロールバーを実装する2つの方法の例

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">すべて</li>
        <li class="nav_item">アドビ</li>
        <li class="nav_item">マイクロソフト</li>
        <li class="nav_item">会計</li>
        <li class="nav_item">絵画</li>
        <li class="nav_item">アドビ</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>

* {
    ボックスのサイズ: 境界線ボックス;
    マージン: 0;
    パディング: 0
}
.nav_wrap{
    オーバーフローx: スクロール;
}
.nav_mine {
    パディング: 15px 10px;
    下境界線: 1px 実線 #aca9a7;
    高さ: 75px;
    オーバーフローx: スクロール;
    オーバーフロー-y: 非表示;
}

.nav_mine .nav_item {
    境界線: 1px実線 #1a110b;
    境界線の半径: 40px;
    色: #aca9a7;
    右マージン: 10px;
    フォントサイズ: 24px;
    パディング: 4px 18px;
    フロート: 左;
    リストスタイル: なし;
}

$(関数(){
    var 幅 = 0;
    (i = 0 とします; i < $('.nav_item').length; i++) {
        幅 += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20); //幅はコンテンツの幅のみで、パディングの幅を追加する必要があります})

* {
    ボックスのサイズ: 境界線ボックス;
}

.nav_mine {
    パディング: 15px 20px;
    下境界線: 1px 実線 #aca9a7;
    高さ: 75px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    オーバーフロー-y: 非表示;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    境界線: 1px 実線 #aca9a7;
    境界線の半径: 40px;
    色: #aca9a7;
    右マージン: 22px;
    フォントサイズ: 24px;
    パディング: 4px 18px;
    リストスタイル: なし;
    空白: ラップなし;
}