Wie können ungeordnete Listenelemente mithilfe von CSS horizontal angezeigt werden?

So erstellen Sie eine horizontale Anzeige einer ungeordneten Liste in einer Zeile

Sie können CSS verwenden, um HTML-Elemente auf verschiedene Arten zu formatieren. Eine häufige Styling-Aufgabe besteht darin, Listenelemente horizontal statt vertikal anzuordnen. In diesem Artikel wird erläutert, wie Sie diesen Effekt mithilfe der Anzeigeeigenschaft erzielen.

Problem

Wie kann ich mithilfe von CSS dafür sorgen, dass Listenelemente horizontal in einer Reihe angezeigt werden?

Lösung

Listenelemente sind normalerweise Blockelemente, was bedeutet, dass sie in einer eigenen Zeile angezeigt werden. Damit sie horizontal fließen, müssen Sie sie in Inline-Elemente umwandeln. Dies geschieht mithilfe der display-Eigenschaft:

#ul_top_hypers li {
  display: inline;
}

In Ihrem ursprünglichen Code hatten Sie die display: inline-Eigenschaft auf das ul-Element selbst angewendet. Dies betrifft jedoch nur die Gesamtliste, nicht die einzelnen Listenelemente. Damit die Listenelemente horizontal angezeigt werden, müssen Sie einen Kontextselektor verwenden, um die Inline-Eigenschaft display: speziell auf sie anzuwenden.

Arbeitsbeispiel

Hier ist ein aktualisiertes Snippet, das die Anzeige zeigt Listen Sie Elemente horizontal in einer Reihe auf:

<div>

#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}

Das obige ist der detaillierte Inhalt vonWie können ungeordnete Listenelemente mithilfe von CSS horizontal angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!