CSS はモバイル デバイスで水平スクロール ナビゲーション バーを実装します (PC デバイスにも適用可能)

<本文>
    <div class="nav">
        <a href="#">ナビ1</a>
        <a href="#">ナビ2</a>
        <a href="#">ナビ3</a>
        <a href="#">ナビ4</a>
        <a href="#">ナビ5</a>
        <a href="#">ナビ6</a>
        <a href="#">ナビ7</a>
        <a href="#">ナビ8</a>
        <a href="#">ナビ9</a>
        <a href="#">ナビ10</a>
        <a href="#">ナビ11</a>
        <a href="#">ナビ12</a>
        <a href="#">ナビ13</a>
        <a href="#">ナビ14</a>
        <a href="#">ナビ15</a>
    </div>
    <div>
        コンテンツエリア</div>
</本文>

.nav {
    幅: 100%;
    高さ: 50px;
    行の高さ: 50px;
    /*段落内で改行しない*/
    空白: ラップなし;
    /*影*/
    ボックスの影: 0 1px 2px rgba(0, 0, 0, .2);
    /*水平スクロールを設定する*/
    オーバーフローx: スクロール;
    /*垂直スクロールを無効にする*/
    オーバーフロー-y: 非表示;
    /*テキストのタイリング*/
    テキスト配置: 両端揃え;
    /*背景色*/
    背景: #F4F5F6;
    パディング: 0px 5px;
    下マージン: 10px;
    /*マージン変更効果をインデントに設定する*/
    ボックスのサイズ: 境界線ボックス;
}
.nav {
    色: #505050;
    /*ハイパーリンクの下線を解除*/
    テキスト装飾: なし;
    マージン: 自動 10px;
}
.nav::-webkit-スクロールバー {
    /*スクロールバーを非表示*/
    表示: なし;
}