web-dev-qa-db-fra.com

Comment faire apparaître une liste HTML horizontalement au lieu d'utiliser verticalement CSS uniquement?

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

Je préfère ne pas utiliser le positionnement absolu car cela pourrait devenir désordonné lorsque je commence à changer la mise en page de la page.

Je voudrais également supprimer le retrait des sous-listes. C'est possible?

htmlcssmenupositioninghorizontallist
39
M. A. Kishawy

Vous devrez utiliser quelque chose comme ci-dessous

#menu ul{
  list-style: none;
}
#menu li{
  display: inline;
}
        
<div id="menu">
  <ul>
    <li>First menu item</li>
    <li>Second menu item</li>
    <li>Third menu item</li>
  </ul>
</div>
63
Ravia

assez facile:

ul.yourlist li { float:left; }

ou

ul.yourlist li { display:inline; }
13
roman

En utilisant display: inline-flex

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex
}
<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>

En utilisant display: inline-block

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline-block;
}
<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>
10
Tushar