Comment faire une liste HTML apparaître horizontalement au lieu de verticalement en utilisant CSS seulement?

Question

J'ai besoin de cela parce que je veux faire un menu (qui est fait à partir d'une liste HTML) apparaître horizontalement.

Je préfère ne pas utiliser le positionnement absolu, car il peut devenir salissant lorsque je commence à modifier la disposition de la page.

Je voudrais également supprimer l'indentation des sous-listes. C'est possible?

Answer 1

Vous devrez utiliser quelque chose comme ci-dessous

#menu ul{ 
 
    list-style: none; 
 
} 
 
#menu li{ 
 
    display: inline; 
 
} 
 
\t

<div id="menu"> 
 
    <ul> 
 
    <li>First menu item</li> 
 
    <li>Second menu item</li> 
 
    <li>Third menu item</li> 
 
    </ul> 
 
</div>

Answer 2

assez simple:

ul.yourlist li { float:left; } 

ou

ul.yourlist li { display:inline; } 

Answer 3

Voici le moyen de plus pour cette question.

DEMO

HTML

<div id="menu"> 
    <ul> 
    <li>First menu item</li> 
    <li>Second menu item</li> 
    <li>Third menu item</li> 
    </ul> 
</div> 

CSS

#menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#menu li { 
    display: inline-block; 
}