CSS: Listenelemente nach x Elementen umbrechen

// 16102008 / Webprogrammierung / 3 Kommentare

Nico hatte mir geschrieben, dass das Umbrechen von "li"s in einen nächsten Block auch mit CSS funktioniert (ich hatte es mit Javascript via jQuery realisiert).

Vom Prinzip her ist es so, dass der umgebende Container - also das "ul" - durch seine Breite sowie durch seine Höhe oder die Höhe eines Elternelements begrenzt sein muss. Die Kinder, also die "li"s erhalten ebenfalls eine Breite und werden gefloatet:

#menu3
{
width: 500px;
height: 200px;
}

#menu3 ul.menu li
{
width: 150px;
float: left;
}

Falls man direkt dem ul die Höhe (und Breite) gibt und nicht einem umschließenden Container, dann muss noch ein overflow:hidden mit aufgenommen werden:

ul.menu
{
height: 100px;
overflow: hidden;
width: 500px;
}

ul.menu li
{
width: 150px;
float: left;
}

Read other interesting articles:

Be Sociable, Share!

3 Kommentare zu "CSS: Listenelemente nach x Elementen umbrechen"

  1. Dr. Azrael Tod Dr. Azrael Tod Oktober 16th, 2008 at 14:22

    nette Idee… das Vergewaltigt den Browser nicht ganz so sehr :-)

  2. nico nico Oktober 19th, 2008 at 09:56

    Hey, freut mich, das ich helfen konnte.

  3. Sumit Sumit Juni 26th, 2011 at 14:18

    Hab es ja schon bei der JS Version gesagt: Das ist leider nicht das Gleiche wie bei der JS Version – es wird an der falschen Stelle umgebrochen.
    Du hast nicht zufällig ne CSS-Lösung deren Ergebnis gleich der JS-Version ist?

    Nummeriere deine Beispielmenüpunkte damit du siehst wo umgebrochen wird!

    Danke & Gruß
    Sumit


Kommentieren




  • www.goneo.de