So erstellen Sie eine <ul>-Anzeige in einer horizontalen Zeile

106

Wie kann ich meine Listenelemente mithilfe von CSS horizontal in einer Reihe anzeigen lassen?

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
Erweitern Sie das Snippet

html css html-lists Babiker
quelle
gute Frage. Ich denke, der Fokus hier liegt wirklich darauf, wie man dies in Übereinstimmung mit den neuesten Webstandards macht
andy

Antworten:

132

Listenelemente sind normalerweise Blockelemente. Verwandeln Sie sie über die displayEigenschaft in Inline-Elemente .

In dem von Ihnen angegebenen Code müssen Sie einen Kontext-Selektor verwenden, damit die display: inlineEigenschaft auf die Listenelemente angewendet wird, anstatt auf die Liste selbst (das Anwenden display: inlineauf die Gesamtliste hat keine Auswirkung):

#ul_top_hypers li {
    display: inline;
}

Hier ist das Arbeitsbeispiel:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
Erweitern Sie das Snippet

hbw
quelle
2
Ich habe diesen Effekt auch durch die Verwendung von float erzielt, wodurch die Blocknatur der Listenelemente beibehalten wurde.
Joel
1
Das ist ein interessanter Ansatz, muss ich sagen - ich denke jedoch, dass dies einige unnötige Probleme mit Rändern und dergleichen verursachen würde, da Sie die Listenelemente effektiv aus dem Box-Modell herausheben.
hbw
1
@htw: Sie können mit jeder der Clearfix-Lösungen wieder einen Gang einlegen.
Alex
2
Sie könnten immer display: inline-block verwenden, wenn Sie die Blocknatur beibehalten möchten ... obwohl dies zu diesem Zeitpunkt noch nicht vollständig unterstützt wird (ich glaube, es ist Fx2, das der Hauptschuldige ist).
James B
17

Sie können sie auch so einstellen, dass sie nach rechts schweben.

#ul_top_hypers li {
    float: right;
}

Dadurch können sie immer noch auf Blockebene sein, werden jedoch in derselben Zeile angezeigt.

Alex
quelle
1
Wenn Sie sie nach rechts schweben lassen, hat dies einen zusätzlichen Effekt: Die Reihenfolge wird so geändert, dass sie von links nach rechts die letzte zur ersten sind.
Matthew James Taylor
Ah ja, sie müssen im Markup umgekehrt werden (so viel zur Trennung von Layout / Markup!)
Alex
11

Setzen Sie die displayEigenschaft inlinefür die Liste, auf die dies angewendet werden soll. Es gibt eine gute Erklärung für die Anzeige von Listen in A List Apart .

Paul Morie
quelle
8

Wie @alex sagte, könnten Sie es nach rechts schweben lassen, aber wenn Sie das Markup gleich halten möchten, schweben Sie es nach links!

#ul_top_hypers li {
    float: left;
}
tjhorner
quelle
7

Es wird für Sie funktionieren:

#ul_top_hypers li {
    display: inline-block;
}
Vikram Mohod
quelle
3

Wie andere erwähnt haben, können Sie das Set lian display:inline;, oder floatdie nach lilinks oder rechts. Darüber hinaus können Sie auch display:flex;auf dem verwenden ul. Im folgenden Snippet habe ich auch hinzugefügt justify-content:space-around, um mehr Abstand zu schaffen.

Weitere Informationen zur Flexbox finden Sie in dieser vollständigen Anleitung .

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
Erweitern Sie das Snippet

Matthew Johnson
quelle
3 
#ul_top_hypers li {
  display: flex;
}
Kumar Saket
quelle