Como fazer uma exibição <ul> em uma linha horizontal

106

Como posso fazer meus itens de lista aparecerem horizontalmente em uma linha usando 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>

Expandir trecho

html css html-lists

— Babiker
fonte

boa pergunta. Acho que o foco aqui é realmente como fazer isso de acordo com os padrões da web mais recentes

— andy

132

Os itens de lista são normalmente elementos de bloco. Transforme-os em elementos embutidos por meio da displaypropriedade.

No código que você forneceu, você precisa usar um seletor de contexto para fazer a display: inlinepropriedade se aplicar aos itens da lista, em vez da própria lista (aplicar display: inlineà lista geral não terá efeito):

#ul_top_hypers li {
    display: inline;
}

Aqui está o exemplo de trabalho:

#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>

Expandir trecho

— hbw
fonte

2

Também consegui esse efeito usando float, mantendo assim a natureza de bloqueio dos itens da lista.

— Joel de

1

Essa é uma abordagem interessante, devo dizer - no entanto, acho que isso criaria alguns problemas desnecessários com as margens e tal, já que você está efetivamente retirando os itens da lista do modelo da caixa.

— hbw

1

@htw: Você pode voltar a funcionar com qualquer uma das soluções Clearfix.

— alex de

2

Você sempre pode usar display: inline-block se quiser manter a natureza do bloco ... embora não seja totalmente compatível neste estágio (acredito que Fx2 é o principal culpado).

— James B de

17

Você também pode configurá-los para flutuar para a direita.

#ul_top_hypers li {
    float: right;
}

Isso permite que eles ainda estejam no nível do bloco, mas aparecerão na mesma linha.

— alex
fonte

1

Flutuá-los para a direita terá um efeito extra: irá trocar a ordem deles, então da esquerda para a direita eles serão os últimos para os primeiros.

— Matthew James Taylor

Sim, eles precisam ser revertidos na marcação (tanto para separação de layout / marcação!)

— alex

11

Defina a displaypropriedade como inlinepara a lista à qual deseja que isso se aplique. Há uma boa explicação sobre como exibir listas em A List Apart .

— Paul Morie
fonte

8

Como @alex disse, você poderia flutuar para a direita, mas se quiser manter a marcação igual, flutue para a esquerda!

#ul_top_hypers li {
    float: left;
}

— Tjhorner
fonte

7

Vai funcionar para você:

#ul_top_hypers li {
    display: inline-block;
}

— vikram mohod
fonte

4

Como outros mencionaram, você pode definir lipara display:inline;, ou para floata liesquerda ou para a direita. Além disso, você também pode usar display:flex;no ul. No trecho abaixo eu também adicionei justify-content:space-aroundpara dar mais espaçamento.

Para obter mais informações sobre o flexbox, consulte este guia completo .

#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>

Expandir trecho

— Matthew Johnson
fonte

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
fonte