Beispiel für die horizontale Anordnung von li-Tags in HTML

Die meisten Navigationsleisten sind horizontal angeordnet, wie in der folgenden Abbildung dargestellt. Wie wird dies also erreicht? Tatsächlich wird hauptsächlich die horizontale Anordnung von li im <ul>-Tag verwendet. Das folgende Beispiel erklärt im Detail, wie es implementiert wird.

1Schreiben Sie die HTML-Codestruktur des horizontalen Menüs

<ul id="Menü">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="//www.jb51.net">Jb51.net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

2. Schreiben Sie CSS-Code

<1>Legen Sie allgemeine Stile fest

<style type="text/css">
    #Speisekarte { 
        font:12px verdana, arial, sans-serif; /* Textgröße und Schriftstil festlegen */
        Breite: 100 %;
    }
    #Menü, #Menü li {
        list-style:none; /* Standard-Listensymbol entfernen*/
        padding:0; /* Standardmäßige Polsterung entfernen*/
        margin:0; /* Den Standardrand entfernen*/
        float: left; /* nach links schweben */
        Anzeige: Block;
}

<2>Linkstil festlegen

<style type="text/css">
    #Menü li a {
        display:block; /* Setze den Link zu einem Block-Level-Element */
        Breite: 150px; /* Breite festlegen */
        Höhe: 30px; /* Höhe festlegen */
        line-height:30px; /* Zeilenhöhe festlegen. Wenn Sie für Zeilenhöhe und Höhe denselben Wert festlegen, können Sie eine einzelne Textzeile vertikal zentrieren*/
        text-align:center; /* Text zentrieren */
        Hintergrund: #3A4953; /* Hintergrundfarbe festlegen */
        Farbe:#fff; /*Textfarbe festlegen*/
        text-decoration:none; /* Unterstreichung entfernen*/
        border-right:1px solid #000; /* Füge links eine Trennlinie hinzu */
}
</Stil>

<3>Link-Hover-Effekt

<style type="text/css">
    #menu li a:hover {
    Hintergrund: #146C9C; /* Hintergrundfarbe ändern*/
    Farbe:#fff; /* Textfarbe ändern*/
    }
</Stil>

<4>Entfernen Sie den rechten Rand der Navigationsleiste ganz links

<style type="text/css">
    #menu li a.last {
    border-right:0; /* Linken Rand entfernen*/
    }
</Stil>

3 Vollständiger Code

<!DOCTYPE html>
<html>
<Kopf>
	<meta charset="utf-8">
	<title>Bildaufforderungseffekt</title>
	<script src="../jquery-3.3.1.min.js"></script>
    <style type="text/css">
        #Speisekarte { 
            font:12px verdana, arial, sans-serif; /* Textgröße und Schriftstil festlegen */
            Breite: 100 %;
        }
        #Menü, #Menü li {
            list-style:none; /* Standard-Listensymbol entfernen*/
            padding:0; /* Standardmäßige Polsterung entfernen*/
            margin:0; /* Den Standardrand entfernen*/
            float: left; /* nach links schweben */
            Anzeige: Block;
        }
        #Menü li a {
            display:inline-block; /* Link als Blockelement festlegen */
            Breite: 150px; /* Breite festlegen */
            Höhe: 30px; /* Höhe festlegen */
            line-height:30px; /* Zeilenhöhe festlegen. Wenn Sie für Zeilenhöhe und Höhe denselben Wert festlegen, können Sie eine einzelne Textzeile vertikal zentrieren*/
            text-align:center; /* Text zentrieren */
            Hintergrund: #3A4953; /* Hintergrundfarbe festlegen */
            Farbe:#fff; /*Textfarbe festlegen*/
            text-decoration:none; /* Unterstreichung entfernen*/
            border-right:1px solid #000; /* Füge links eine Trennlinie hinzu */
        }
        #menu li a:hover {
            Hintergrund: #146C9C; /* Hintergrundfarbe ändern*/
            Farbe:#fff; /* Textfarbe ändern*/
        }
        #menu li a.last {
            border-right:0; /* Linken Rand entfernen*/
        }
</Stil>
 
</Kopf>
<Text>
    <ul id="Menü">
        <li><a href="http://www.baidu.com">Baidu.Com</a></li>
         <li><a href="//www.jb51.net">Jb51.net</a></li>
         <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
         <li><a href="http://www.google.com" class="last">Google.Com</a></li>
    </ul>
</body>
</html>

Online-Betrieb

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern

Kurz gesagt, das Wichtigste für die horizontale Anordnung ist: Der Hauptstil des <ui>-Tags ist display:balock;

Die wichtigsten Stile von <li> sind display:inline-barlock,float:left,list-style:none;

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel der horizontalen Anordnung von li in HTML-Tags. Weitere relevante HTML-Inhalte zur horizontalen Anordnung von li finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: JavaScript implementiert coole Mouse-Tailing-Effekte

>>: Einfacher CSS-Textanimationseffekt

Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

Artikel empfehlen

Beispiele für die Verwendung des ES6-Spread-Operators

Inhaltsverzeichnis Was sind Spread- und Rest-Oper...

Memcached-Methode zum Erstellen eines Cache-Servers

Vorwort Viele Webanwendungen speichern Daten in e...

Eine kurze Analyse der SpringBoot-Verpackung und des Hochladens in Docker sowie der Implementierung der Bereitstellung mehrerer Instanzen (IDEA-Version)

Kürzlich fragte mich ein Freund, ob ich schon ein...

Beispiel für die horizontale Anordnung von li-Tags in HTML

Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

W3C Tutorial (13): W3C WSDL Aktivitäten

Implementierung des Umschreibesprungs in Nginx

Vorteile und Probleme des XHTML CSS Website Designs

Detaillierte Erklärung zur Verwendung von awk unter Linux

Tipps zur Verwendung von Bildlaufleisten in HTML

So löschen Sie verstümmelte oder mit Sonderzeichen versehene Dateien in Linux

Beispielcode für HTML-Layout links und rechts

Unterschied und Implementierung von JavaScript Anti-Shake und Throttling

Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS

Artikel empfehlen

Beispiele für die Verwendung des ES6-Spread-Operators

Memcached-Methode zum Erstellen eines Cache-Servers

Eine kurze Analyse der SpringBoot-Verpackung und des Hochladens in Docker sowie der Implementierung der Bereitstellung mehrerer Instanzen (IDEA-Version)

So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist

Über Vue, um wiederholte Eingabeaufforderungen beim Aktualisieren der Seite nach Ablauf des Tokens zu vermeiden

Probleme und Lösungen bei der Installation von Mininet auf Ubuntu 16.04.4LTS

Implementieren eines Einkaufswagens mit nativem JavaScript

Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?

HTML-Maus-CSS-Steuerung

Ein kurzes Verständnis der Unterschiede zwischen MySQL InnoDB und MyISAM

Sublime Text - Empfohlene Methode zum Festlegen von Browser-Tastenkombinationen

Detaillierte Erläuterung der Speicherverwaltung der MySQL InnoDB-Speicher-Engine

Lösung für das Problem „Tabelle mysql.plugin existiert nicht“ beim Deployment von MySQL

Zusammenfassung einiger Tipps zum Umgehen der Node.js-Codeausführung

Datagrip2020 kann MySQL-Treiber nicht herunterladen