Zwei Möglichkeiten, mit CSS eine horizontale Anordnung von ul und li zu erreichen

Da li ein Element auf Blockebene ist und standardmäßig eine Zeile einnimmt, können Sie im Allgemeinen die folgenden zwei Methoden verwenden, wenn Sie eine horizontale Anordnung erreichen möchten:

schweben: links
Es gibt ein Problem mit dieser Einstellung. Nachdem das li schwebend ist, befindet es sich außerhalb des Textflusses, d. h. es nimmt keinen Platz ein. Wenn das übergeordnete Element einen bestimmten Stil und keine feste Breite und Höhe hat, wird empfohlen, dass das übergeordnete Element den Float löscht oder eine feste Breite und Höhe einstellt

Anzeige: Inline-Block

Das heißt, wandeln Sie li in ein Inline-Element um und legen Sie Breite, Höhe und Ränder fest. Auch hier gibt es ein Problem. Niedrigere Versionen von IE-Browsern sind nicht mit Inline-Block kompatibel. Es wird empfohlen, zwei weitere Attribute danach hinzuzufügen, um mit niedrigeren IE-Versionen kompatibel zu sein.
*Anzeige: Inline;
*Zoom:1;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<Kopf>
<title>Zwei Methoden der horizontalen Anordnung von CSS + ul li</title>
</Kopf>
<Text>
  <div id="nav">
  <ul>
    <li><a href="http://blog.csdn.net/superbirds" title="">Supervögel</a></li>
    <li><a href="http://blog.csdn.net/superbirds" title="">Supervögel</a></li>    
    <li><a href="http://blog.csdn.net/superbirds" title="">Supervögel</a></li>
    <li><a href="http://blog.csdn.net/superbirds" title="">Supervögel</a></li>
  </ul>
  </div>
</body>
</html>

CSS-Code 1:

* {
    Rand: 0;
    Rand: 0;
    Polsterung: 0;
    Schriftgröße: 13pt;
}
 
#nav {
    Höhe: 40px;
    Rahmen oben: #060 2px durchgezogen;
    Rahmen unten: #060 2px durchgezogen;
    Hintergrundfarbe: #690;
}
 
#nav ul {
    Listenstil: keiner;
    Rand links: 50px;
}
 
#nav li {
    Anzeige: inline;
    Zeilenhöhe: 40px;
    schweben: links
}
 
#nav ein {
    Farbe: #fff;
    Textdekoration: keine;
    Polsterung: 20px 20px;
}
 
#nav a:hover {
    Hintergrundfarbe: #060;
}

CSS-Code 2:

* {
    Rand: 0;
    Rand: 0;
    Polsterung: 0;
    Schriftgröße: 13pt;
}
 
#nav {
    Höhe: 40px;
    Rahmen oben: #060 2px durchgezogen;
    Rand oben: 100px;
    Rahmen unten: #060 2px durchgezogen;
    Hintergrundfarbe: #690;
}
 
#nav ul {
    Listenstil: keiner;
    Zeilenhöhe: 40px;
    Rand links: 50px;
}
 
#nav li {
    Anzeige: Block;
    schweben: links;
}
 
#nav ein {
    Anzeige: Block;
    Farbe: #fff;
    Textdekoration: keine;
    Polsterung: 0 20px;
}
 
#nav a:hover {
    Hintergrundfarbe: #060;
}

Damit ist dieser Artikel über zwei Methoden zur Implementierung der horizontalen Anordnung von ul und li mit CSS abgeschlossen. Weitere Informationen zur Implementierung der horizontalen Anordnung von ul und li mit CSS 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!

<<: Standardmäßige Stilanordnung für HTML-Tags

>>: Verwenden von Zabbix zum Überwachen des Betriebsvorgangs des Oracle-Tabellenbereichs

Konfiguration der Fensterumgebung Mysql 5.7.21 windowx64.zip kostenlose Installationsversion Tutorial detaillierte Erklärung

Artikel

Beispiel für eine MySQL-Datenbank-übergreifende Transaktions-XA-Operation

Zwei Möglichkeiten, mit CSS eine horizontale Anordnung von ul und li zu erreichen

Konfiguration der Fensterumgebung Mysql 5.7.21 windowx64.zip kostenlose Installationsversion Tutorial detaillierte Erklärung

Beispiel für eine MySQL-Datenbank-übergreifende Transaktions-XA-Operation

Analyse der Prinzipien verschiedener Möglichkeiten zur Nachahmung des Lupeneffekts in CSS3

Allgemeine Betriebsbefehle von MySQL im Linux-System

Ein Artikel zum Verständnis von MySQL Index Pushdown (ICP)

Diagramm des Bereitstellungs- und Installationsprozesses in der Java+Tomcat-Umgebung

CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen

Verwenden Sie das Ansichtsfenster im Meta-Tag, um das Bildschirm-CSS zu definieren

Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

Es wird nicht empfohlen, den Inhalt in Word direkt in den Editor auf der Website zu kopieren.

Artikel empfehlen

So überprüfen Sie, ob die Ports des lokalen Computers und des Remote-Servers unter Linux verbunden sind

js canvas realisiert kreisförmige Wasseranimation

Zusammenfassung der React-Grundlagen

CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

Eine kurze Diskussion über das Design des Tomcat-Mehrschichtcontainers

Detailliertes Tutorial zum Kompilieren und Installieren von mysql8.0.29 in der LNMP-Umgebung von CentOS8

Methoden und Schritte zum Bereitstellen mehrerer War-Pakete in Tomcat

Implementierung eines Crawler-Scrapy-Image, das von Dockerfile basierend auf Alpine erstellt wurde

MySQL-Hochverfügbarkeitslösung MMM (MySQL Multi-Master-Replikationsmanager)

So verwenden Sie Nginx, um die Koexistenz mehrerer Container auf dem Server zu realisieren

VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion

So stellen Sie MongoDB-Container mit Docker bereit

12 Arten der Komponentenkommunikation in Vue2

Eine detaillierte Einführung in den Ausführungsmechanismus von JavaScript

Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS