Warum werden meine horizontalen Listenelemente nicht richtig angezeigt?

Horizontale Listenelemente: Fehlerbehebung und Lösungen

Beim Versuch, eine horizontale Liste für eine Website zu erstellen, sind Probleme aufgetreten trotz der Anwendung häufig vorgeschlagener Lösungen wie der Einstellung von „float“ auf links. Um dieses Problem zu diagnostizieren und zu beheben, untersuchen wir die bereitgestellte HTML- und CSS-Struktur.

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

<ul>

Analysis

Die bereitgestellte Codestruktur ist fast korrekt . Sie haben jedoch die Eigenschaft „display“ von „li“-Elementen auf „inline“ statt auf „inline-block“ gesetzt. Dadurch wird verhindert, dass die Elemente horizontal fließen.

Solution

Um eine horizontale Liste zu erstellen, ändern Sie die Eigenschaft „display“ von „li“-Elementen in „inline-“ block' in Ihrem CSS:

ul#menuItems li {
  display: inline-block;
}

Durch die Aktualisierung Ihres CSS wie vorgeschlagen werden Ihre Listenelemente jetzt horizontal angezeigt, als beabsichtigt.

Das obige ist der detaillierte Inhalt vonWarum werden meine horizontalen Listenelemente nicht richtig angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!