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

Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung

Die Ressourcen und Aktivierungsmethoden des MySQL-Desktoptools SQLyog verabschieden sich von der schwarz-weißen Befehlszeile

Lassen Sie uns ohne weitere Umschweife mit den Re...

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

Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung

Detaillierte Erklärung der Mencached-Cache-Konfiguration basierend auf Nginx

So installieren Sie Tomcat8 im Docker

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

So verwenden Sie VUE und Canvas, um ein Thunder Fighter-Tippspiel zu implementieren

Einführung und Verwendungszusammenfassung der negativen Margenfunktion

MySQL-8.0.26 Konfigurationsgrafik-Tutorial

Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Artikel empfehlen

So verwenden Sie den Linux-Befehl seq

HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag

Implementierung des Pycharm-Installationstutorials auf Ubuntu 18.04

Lösung für das Problem, dass der Bridge-Modus der virtuellen Maschine von VMware15 nicht auf das Internet zugreifen kann

Diskussion über die Möglichkeit zum Öffnen von Website-Hyperlinks

Schritte zum Importieren von Millionen von Daten in MySQL mit .Net Core

So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen

Die Ressourcen und Aktivierungsmethoden des MySQL-Desktoptools SQLyog verabschieden sich von der schwarz-weißen Befehlszeile

Lösen Sie das Problem, dass MySQL einen ungültigen Standardwert für den Fehler „operate_time“ meldet.

Detaillierte Erklärung zur Verwendung des Split-Befehls zum Teilen von Linux-Dateien

Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?

Detailliertes Tutorial zur Installation der virtuellen Python 3-Umgebung in Ubuntu 20.04

Analyse, wie eine gespeicherte Prozedur in MySQL erstellt wird, um einer Datentabelle neue Felder hinzuzufügen

Docker fügt eine Brücke hinzu und legt den IP-Adressbereich fest

Implementierung des Markdown-Renderings in einer Vue-Einzelseitenanwendung