web-dev-qa-db-fra.com

Comment faire un <ul> afficher dans une ligne horizontale

Comment puis-je faire apparaître horizontalement les éléments de ma liste à l'aide de 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>
htmlcsshtml-lists
98
Babiker

Les éléments de liste sont normalement des éléments de bloc. Transformez-les en éléments intégrés via la propriété display.

Dans le code que vous avez donné, vous devez utiliser un sélecteur de contexte pour que la propriété display: inline S'applique aux éléments de la liste, au lieu de la liste elle-même (appliquer 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>
124
hbw

Vous pouvez également les définir pour flotter à droite.

#ul_top_hypers li {
    float: right;
}

Cela leur permet de rester au niveau du bloc, mais apparaîtra sur la même ligne.

15
alex

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

11
Paul Morie

Comme @alex l'a dit, vous pourriez le laisser flotter à droite, mais si vous voulez garder le balisage identique, faites-le flotter à gauche!

#ul_top_hypers li {
    float: left;
}
7
tjhorner

Cela fonctionnera pour vous:

#ul_top_hypers li {
    display: inline-block;
}
5
vikram mohod

Comme d'autres l'ont mentionné, vous pouvez définir le li sur display:inline; ou float le li à gauche ou à droite. De plus, vous pouvez aussi utiliser display:flex; sur le ul. Dans l'extrait ci-dessous, j'ai également ajouté justify-content:space-around pour lui donner plus d’espacement.

Pour plus d'informations sur flexbox, consultez ceci 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>
3
Matthew Johnson
#ul_top_hypers li {
  display: flex;
}
2
Kumar Saket