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

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

Artikel empfehlen

JavaScript imitiert Xiaomi-Karusselleffekt

Dieser Artikel ist eine selbstgeschriebene Nachah...

Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer

1. Verwenden Sie auf einem vernetzten Computer di...

Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Tutorial zur npm-Installation: 1. Laden Sie das N...

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Installationsumgebung Windows 10 VMware Workstati...

Webpack lädt CSS-Dateien und ihre Konfigurationsmethode

webpack lädt CSS-Dateien und deren Konfiguration ...

Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker

Text 1) Laden Sie das Ubuntu-Image herunter Docke...

10 Gründe, warum Linux immer beliebter wird

Linux wird von immer mehr Benutzern geliebt. Waru...

Gestaltung der Bildvorschau auf der Inhaltswebseite

<br />Ich habe bereits zwei Artikel geschrie...

So stellen Sie mit Navicat Premium eine Remoteverbindung zur MySQL-Datenbank her

Derjenige, der eine neue Verbindung herstellt, en...

Eine detaillierte Analyse des Mordes, der durch ein falsch platziertes Anführungszeichen in MySQL verursacht wurde

1. Einleitung In letzter Zeit erlebe ich es oft, ...

Erste Schritte beim Erstellen einer Website für Anfänger - Die Voraussetzungen und Tools, die zum Erstellen einer Website erforderlich sind

Heute werde ich diese Anfängerfragen beantworten: ...

jQuery implementiert Akkordeon-Kleinbuchstaben

Dieser Artikel gibt Ihnen den spezifischen Code v...

Detaillierte Erläuterung der default_server-Definition und der entsprechenden Regeln von nginx

Die default_server-Direktive von nginx kann einen...

Vue + Canvas realisiert den Effekt der Aktualisierung des Wasserfalldiagramms von oben nach unten in Echtzeit (ähnlich wie QT).

Ohne weitere Umschweife hier ein Demobild. Die im...

Detaillierte Erklärung des Flex-Layouts in CSS

Flex-Layout wird auch elastisches Layout genannt....