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

Respostas:

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