Wie lässt sich eine ungeordnete Liste in CSS horizontal anzeigen?

Wie man einen

In einer horizontalen Zeile anzeigen

In CSS werden Listenelemente normalerweise als Blockelemente angezeigt, was bedeutet, dass sie sich über die gesamte Breite ihres Containers erstrecken. Möglicherweise möchten Sie jedoch, dass Ihre Listenelemente horizontal in einer Reihe angezeigt werden. Um dies zu erreichen, befolgen Sie diese Schritte:

1. Geräteanzeige: Inline; auf Listenelementen

Um Listenelemente inline anzuzeigen, müssen Sie die Anzeige anwenden: inline; Eigentum an sie. Wenn Sie diese Eigenschaft jedoch direkt auf das

Element wird keine Wirkung haben. Verwenden Sie stattdessen Kontextselektoren, um die Listenelemente innerhalb von
anzusprechen:

#ul_top_hypers li {
    display: inline;
}

2. Übergeordneten Container anpassen (optional)

Im bereitgestellten Code verfügt der übergeordnete Container (#div_top_hypers) auch über display: inline; angewandt. Während dies für die horizontale Anzeige von Listenelementen nicht notwendig ist, kann es in einigen Fällen unerwünschtes Verhalten verhindern.

Beispiel

Der folgende Codeausschnitt demonstriert die Implementierung dieser Schritte:

#div_top_hypers {
    background-color:#eeeeee;
}

#ul_top_hypers li {
    display: inline;
}

<div>

Wenn Sie diese Schritte befolgen, können Sie Ihre Listenelemente ganz einfach in einer horizontalen Reihe anzeigen lassen CSS.

Das obige ist der detaillierte Inhalt vonWie lässt sich eine ungeordnete Liste in CSS horizontal anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!