Wie erstelle ich eine wirklich horizontale Liste in CSS?

Horizontale Listenelemente erstellen

Beim Versuch, eine horizontale Liste zu erstellen, kann es zu Problemen kommen, wenn die Listenelemente nicht horizontal ausgerichtet sind. Um dieses Problem zu beheben, finden Sie hier eine vereinfachte Lösung:

Das Problem:

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

Die Verwendung von display: inline und den automatischen Rändern führt nicht zum gewünschten Ergebnis.

Die Lösung:

ul > li {
    display: inline-block;
}

Durch Beschäftigung display: inline-block zu den Listenelementen hinzufügen, verhalten sie sich wie einzelne Blöcke innerhalb des horizontalen Flusses. Dadurch wird sichergestellt, dass jedes Element seinen Inhalt umschließt und sich horizontal ausrichtet.

Hier ist ein aktualisierter Codeausschnitt:

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine wirklich horizontale Liste in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!