Faire apparaître les éléments ul dans une rangée horizontale

Question

Comment faire pour que l'élément d'une liste ul apparaisse horizontalement dans une ligne en utilisant CSS?

voici le code

 <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">  Perefrences</a></li>
                <li>&#8227; <a href="" class="a_top_hypers">  logout</a></li>
            </ul>
        </div>
 

-

 #div_top_hypers{
    background-color:#eeeeee;
        display:inline;

}
#ul_top_hypers{

  display: inline;




}
 

Answer 1

Les éléments de liste sont normalement des éléments de bloc. Transformez-les en éléments en ligne 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 aura aucun effet):

 #ul_top_hypers li
{
    display: inline;
}
 

Answer 2

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.

Answer 3

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 .

Answer 4

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

 #ul_top_hypers li {
    float: left;
}