Jak wyświetlić <ul> w poziomym rzędzie

106

Jak mogę sprawić, by moje elementy listy były wyświetlane poziomo w rzędzie za pomocą CSS?

#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>
Rozwiń fragment

html css html-lists Babiker
źródło
dobre pytanie. Myślę, że skupiamy się tutaj naprawdę na tym, jak to zrobić zgodnie z najnowszymi standardami sieciowymi
andy

Odpowiedzi:

132

Elementy listy są zwykle elementami blokowymi. Zamień je w elementy wbudowane za pośrednictwem displaywłaściwości.

W podanym kodzie musisz użyć selektora kontekstu, aby display: inlinewłaściwość miała zastosowanie do elementów listy, zamiast samej listy (zastosowanie display: inlinedo całej listy nie przyniesie żadnego efektu):

#ul_top_hypers li {
    display: inline;
}

Oto działający przykład:

#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>
Rozwiń fragment

hbw
źródło
2
Osiągnąłem ten efekt również za pomocą float, zachowując w ten sposób blokowy charakter elementów listy.
Joel
1
Muszę powiedzieć, że to interesujące podejście - jednak myślę, że spowodowałoby to niepotrzebne kłopoty z marginesami i tym podobne, ponieważ skutecznie usuwasz elementy listy z modelu pudełka.
hbw
1
@htw: Możesz wrzucić go z powrotem na bieg za pomocą dowolnego rozwiązania Clearfix.
Alex
2
Zawsze możesz użyć display: inline-block, jeśli chcesz zachować charakter bloku ... chociaż nie jest on w pełni obsługiwany na tym etapie (uważam, że to Fx2 jest głównym winowajcą).
James B
17

Możesz także ustawić je tak, aby pływały w prawo.

#ul_top_hypers li {
    float: right;
}

Dzięki temu mogą nadal być na poziomie bloku, ale pojawią się w tej samej linii.

Alex
źródło
1
Przesunięcie ich w prawo będzie miało dodatkowy efekt: zamieni ich kolejność, aby od lewej do prawej były ostatnie do pierwszych.
Matthew James Taylor
Ach tak, będą musiały zostać odwrócone w znacznikach (tyle, jeśli chodzi o oddzielenie układu / znaczników!)
alex
11

Ustaw displaywłaściwość inlinena listę, do której chcesz zastosować. Istnieje dobre wyjaśnienie wyświetlania list w A List Apart .

Paul Morie
źródło
8

Jak @alex powiedział pan mógł go unosić w porządku, ale jeśli chciał zachować znaczników samo, unoszą go w lewo!

#ul_top_hypers li {
    float: left;
}
tjhorner
źródło
7

To zadziała dla Ciebie:

#ul_top_hypers li {
    display: inline-block;
}
vikram mohod
źródło
4

Jak wspominają inni, można ustawić lisię display:inline;lub w lewo lub w prawo. Dodatkowo możesz również użyć na . W poniższym fragmencie dodałem również, aby nadać mu więcej odstępów.floatlidisplay:flex;uljustify-content:space-around

Aby uzyskać więcej informacji na temat flexbox, zapoznaj się z tym kompletnym przewodnikiem .

#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>
Rozwiń fragment

Matthew Johnson
źródło
3 
#ul_top_hypers li {
  display: flex;
}
Kumar Saket
źródło