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

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

Verwendung des Linux-Watch-Befehls

Detaillierte Analyse des Diff-Algorithmus in React

SQL-Abfrage MySql-Datenbanktabellenname und -beschreibung Tabellenfeld- (Spalten-)Informationen

Probleme und Lösungen beim Ersetzen von Oracle durch MySQL

Das Implementierungsprinzip des Zabbix-Sammelskripts zur dynamischen Ausführungsüberwachung

Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.6.21

MySQL-unabhängiger Index und gemeinsame Indexauswahl

Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac

Detaillierte Schritte zur vollständigen Deinstallation und Neuinstallation von MySQL unter Windows 10

Artikel empfehlen

So installieren Sie die PHP7 Redis-Erweiterung auf CentOS7

MySQL-Fehlernummer 1129 – Lösung

Ist es notwendig, dem Img-Bild-Tag ein Alt-Attribut zuzuweisen?

Installieren Sie MySQL offline mit RPM unter CentOS 6.4

So löschen Sie schnell alle Tabellen in MySQL, ohne die Datenbank zu löschen

So implementieren Sie eine Paging-Abfrage in MySQL

Schritte zum Übertragen von Dateien und Ordnern zwischen zwei Linux-Servern

Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme

HTML-Tabellen-Tag-Tutorial (17): Tabellentitel vertikales Ausrichtungsattribut VALIGN

Änderung des Zeitzonenproblems von MySQL-Containern in Docker

So implementieren Sie Docker, um Parameter dynamisch an Springboot-Projekte zu übergeben

Detaillierte Erklärung der Verwendung und des Unterschieds zwischen nohup und & in Linux

Zusammenfassung der häufigsten Fehler im Webdesign

Beispielanalyse zur Metadatenextraktion von MySQL und Oracle

So verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe