it-swarm.com.de

Wie kann eine HTML-Liste mit CSS horizontal anstatt vertikal angezeigt werden?

Ich brauche das, weil ich ein Menü (das aus einer HTML-Liste besteht) horizontal anzeigen lassen möchte.

Ich bevorzuge die Verwendung der absoluten Positionierung, da dies zu Problemen führen kann, wenn ich das Layout der Seite ändere.

Ich möchte auch die Einrückung der Unterlisten entfernen. Ist es möglich?

39
M. A. Kishawy

Sie müssen so etwas wie unten verwenden

#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

ziemlich einfach:

ul.yourlist li { float:left; }

oder

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

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

Mit 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