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
source

bonne question. Je pense que l'objectif ici est vraiment de savoir comment faire cela conformément aux dernières normes Web

— andy

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

7

Cela fonctionnera pour vous:

#ul_top_hypers li {
    display: inline-block;
}

— Vikram Mohod
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
source

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
source