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

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