Wie zeige ich Listenelemente mithilfe von CSS horizontal an?

So erstellen Sie ein <ul> In einer horizontalen Zeile anzeigen

In HTML werden Listenelemente normalerweise als Blockelemente angezeigt, was bedeutet, dass sie übereinander angezeigt werden. Sie können jedoch CSS verwenden, um die Anzeigeeigenschaft von Listenelementen in „Inline“ zu ändern, was dazu führt, dass sie nebeneinander in derselben Zeile angezeigt werden.

Um die Anzeigeeigenschaft von Listenelementen zu ändern, können Sie dies tun Verwenden Sie die folgende CSS-Regel:

li {
    display: inline;
}

Sie können auch einen Kontextselektor verwenden, um die Inline-Anzeigeeigenschaft anzuwenden, um Elemente innerhalb eines bestimmten <ul> Element, etwa so:

#ul-id li {
    display: inline;
}

Hier ist ein Beispiel dafür, wie die Inline-Anzeigeeigenschaft verwendet wird, um ein <ul>-Element zu erstellen. Anzeige in einer horizontalen Zeile:

<ul>

#ul-id {
    display: inline;
}

#ul-id li {
    display: inline;
}

Dieser Code führt zu der folgenden Ausgabe:

Item 1 Item 2 Item 3

Wie Sie sehen können, werden die Listenelemente jetzt horizontal angezeigt Zeile.

Das obige ist der detaillierte Inhalt vonWie zeige ich Listenelemente mithilfe von CSS horizontal an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!