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

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig

Es gibt eine Interviewfrage, die Folgendes erforde...

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

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Docker erstellt die Codeerkennungsplattform SonarQube und erkennt den Prozess von Maven-Projekten

So verwenden Sie CocosCreator zum Erstellen eines Schießspiels

Installieren Sie .NET 6.0 im CentOS-System mithilfe eines Cloud-Servers

Vue-Entwicklungsbaumstrukturkomponenten (Komponentenrekursion)

Vue-Routing zum Implementieren der Login-Abfangung

Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS

Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit

So generieren Sie PDFs und laden sie im Vue-Frontend herunter

So verwenden Sie die Lodop-Drucksteuerung in Vue, um browserkompatibles Drucken zu erreichen

Artikel empfehlen

Tutorial zur Installation von Ubuntu 20.04 und NVIDIA-Treibern

Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design

Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion

Analyse und Lösung der Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden

MySQL 5.7-Clusterkonfigurationsschritte

Ubuntu-Installations-Grafiktreiber und CUDA-Tutorial

Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig

Erkennung und Lösung von Vue.$set-Fehlerfallen

Schritte zur Linux-Bridge-Methode zum Überbrücken zweier virtueller VirtualBox-Netzwerke

Implementierungscode für die Dateimontage von DockerToolBox

MySQL slow_log-Tabelle kann nicht in InnoDB-Engine geändert werden – detaillierte Erklärung

Zusammenfassung der MySQL-Slow-Log-Praxis

CSS3-Lösung für das Problem des Einfrierens auf Mobilgeräten (Optimierung der Animationsleistung)

MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder

HTML implementiert ein schreibgeschütztes Textfeld und kann den Inhalt nicht ändern