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

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