risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come far apparire un elenco HTML in orizzontale anziché in verticale usando solo CSS?

Ne ho bisogno perché voglio far apparire un menu (che è fatto da un elenco HTML) in senso orizzontale.

Preferisco non utilizzare il posizionamento assoluto poiché potrebbe diventare disordinato quando inizio a modificare il layout della pagina.

Vorrei anche rimuovere il rientro degli elenchi secondari. È possibile?

htmlcssmenupositioninghorizontallist
39
M. A. Kishawy

Dovrai usare qualcosa come sotto

#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

abbastanza semplice:

ul.yourlist li { float:left; }

o

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

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

Utilizzando 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