Comment faire un affichage <ul> sur une ligne horizontale

106

Comment puis-je faire apparaître les éléments de ma liste horizontalement dans une ligne en utilisant 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>
Développer l'extrait

html css html-lists Babiker
la source
bonne question. Je pense que l'objectif ici est vraiment de savoir comment faire cela conformément aux dernières normes Web
andy

Réponses:

132

Les éléments de liste sont normalement des éléments de bloc. Transformez-les en éléments en ligne via la displaypropriété.

Dans le code que vous avez donné, vous devez utiliser un sélecteur de contexte pour que la display: inlinepropriété s'applique aux éléments de la liste, au lieu de la liste elle-même (l'application display: inlineà la liste globale n'aura aucun effet):

#ul_top_hypers li {
    display: inline;
}

Voici l'exemple de travail:

#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>
Développer l'extrait

hbw
la source
2
J'ai également obtenu cet effet en utilisant float, conservant ainsi la nature de bloc des éléments de la liste.
Joel
1
C'est une approche intéressante, je dois dire - cependant, je pense que cela créerait des tracas inutiles avec des marges et autres, puisque vous sortez effectivement les éléments de la liste du modèle de boîte.
hbw
1
@htw: Vous pouvez le remettre en marche avec l'une des solutions clearfix.
alex
2
Vous pouvez toujours utiliser display: inline-block si vous souhaitez conserver la nature du bloc ... même si ce n'est pas complètement pris en charge à ce stade (je crois que c'est Fx2 qui est le principal coupable).
James B
17

Vous pouvez également les configurer pour qu'ils flottent vers la droite.

#ul_top_hypers li {
    float: right;
}

Cela leur permet d'être toujours au niveau du bloc, mais apparaîtra sur la même ligne.

Alex
la source
1
Les faire flotter à droite aura un effet supplémentaire: cela changera leur ordre de gauche à droite, ils seront les derniers aux premiers.
Matthew James Taylor
Ah oui, ils devront être inversés dans le balisage (tant pis pour la séparation de la mise en page / du balisage!)
alex
11

Définissez la displaypropriété sur inlinepour la liste à laquelle vous souhaitez que cela s'applique. Il y a une bonne explication de l'affichage des listes sur A List Apart .

Paul Morie
la source
8

Comme @alex l'a dit, vous pouvez le faire flotter à droite, mais si vous voulez garder le balisage identique, faites-le flotter vers la gauche!

#ul_top_hypers li {
    float: left;
}
tjhorner
la source
7

Cela fonctionnera pour vous:

#ul_top_hypers li {
    display: inline-block;
}
Vikram Mohod
la source
4

Comme d'autres l'ont mentionné, vous pouvez définir le lisur display:inline;, ou floatla ligauche ou la droite. De plus, vous pouvez également utiliser display:flex;sur le ul. Dans l'extrait ci-dessous, j'ai également ajouté justify-content:space-aroundpour lui donner plus d'espacement.

Pour plus d'informations sur flexbox, consultez ce guide complet .

#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>
Développer l'extrait

Matthew Johnson
la source
3 
#ul_top_hypers li {
  display: flex;
}
Kumar Saket
la source