CSS implementiert horizontal scrollende Navigationsleiste auf Mobilgeräten (gilt auch für PC-Geräte)

<Text>
    <div Klasse="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>
        Inhaltsbereich</div>
</body>

.nav {
    Breite: 100 %;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    /*Keine Zeilenumbrüche in Absätzen*/
    Leerzeichen: Nowrap;
    /*Schatten*/
    Kastenschatten: 0 1px 2px rgba(0, 0, 0, .2);
    /*Horizontales Scrollen einstellen*/
    Überlauf-x: scrollen;
    /*Vertikales Scrollen deaktivieren*/
    Überlauf-y: versteckt;
    /*Textkacheln*/
    Textausrichtung: Blocksatz;
    /*Hintergrundfarbe*/
    Hintergrund: #F4F5F6;
    Polsterung: 0px 5px;
    Rand unten: 10px;
    /*Stellen Sie den Effekt der Randänderung auf Einzug ein*/
    Box-Größe: Rahmenbox;
}
.nav ein {
    Farbe: #505050;
    /*Unterstreichung des Hyperlinks aufheben*/
    Textdekoration: keine;
    Rand: automatisch 10px;
}
.nav::-webkit-scrollbar {
    /*Bildlaufleiste ausblenden*/
    Anzeige: keine;
}