CSS: li nebeinander anzeigen

Die li-Elemente sind normalerweise Block-Elemente und werden daher untereinander angezeigt. Mit display: inline oder display: inline-block änderst du diese Eigenschaft und zeigst die Elemente nebeinander (inline) an:

li {
  display: inline-block;
}

Es bietet sich an dieser Stelle an, auch noch andere Formatierungen zu ändern:

li {
  display: inline-block;
  list-style-type: none;
  padding-right: 10px;
}

So sorgen wir dafür, dass zusätzlich zu der Anzeige nebeneinander, auch die Bullets vor den Listeneinträgen verschwinden und es einen gewissen Abstand zwischen den Items gibt.

@media (max-width: 600px) {
  li {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
  }
}

Du sagtest, du willst die li-Änderung nur anwenden, wenn der Platz für die Seite im Browser geringer wird. Das kannst du so machen, wie im letzten Beispiel gezeigt. Damit wird die Liste erst ab einer Fensterbreite kleiner als 600px aktiv.
21.04.2018 um 21:43