Listen (UL) Umbruch automatisch

[awortmeier]

Hallo,

ich habe eine Frage zum Thema CSS - Listen (UL).

Ich möchte eine Liste nach zb. 100 Pixeln oder 10 Elementen (Kriterium is mir egal) so fomatieren, dass sie automatisch einen "Umbruch" (wieder oben anfängt) macht.

Beispiel:

Listenelement 1                    Listenelement 6
Listenelement 2                    Listenelement 7
Listenelement 3                    Listenelement 8
Listenelement 4                    Listenelement 9
Listenelement 5                    Listenelement 10

hier ein kurzer Teil aus dem realen Code:

<ul>
 <li>A</li>
 <li>
  <ul>
   <li>xxxxx</li>
   <li>xxxxx</li>
   <li>xxxxx</li>
  </ul>
 </li>
 <li>B</li>
 <li>
  <ul>
   <li>xxxxx</li>
   <li>xxxxx</li>
   <li>xxxxx</li>
  </ul>
 </li>
 <li>C</li>
....

Habe leider keine Idee wie ich das realiseren soll und ob sowas überhaupt geht.
Alternativ würde ich die Liste in mehrere Teillisten zerstückeln und floaten. Was aber mehr Aufwand beim Erweitern der Liste heißen würde, darum würde ich das gern umgehen.

EDIT: Die einzelnen Unterlisten sind nicht immer gleich lang. Idee vllt noch mit nth-child()...

Vielen Dank für eure Hife
Grüße
Alex

 

[hela]

... nach zb. 100 Pixeln oder 10 Elementen (Kriterium is mir egal) ...

Hallo,
mir ist das auch egal. Aber du kannst den "Unterlisten" eine multi-column-Eigenschaft geben. Wenn du z.B. die Spaltenbreite festlegst, dann ergibt sich die Anzahl der Spalten aus dem Verhältnis der Breite des umgebenden Containers zur festgelegten Spaltenbreite.

Hier ein Beispiel: jsfiddle.net/AS56N/

 

[awortmeier]

Hallo,
dank dir Hela für deine Hilfe, leider ist es nicht das, was ich brauche. Ich habe es jetzt einfach selbst umgebrochen und gefloatet.

Grüße
Alexander

 

[Grille]

Vielleicht kannst du mit der css3 Eigenschaft multicol einfach zwei Spalten definieren und so nach 100 Einträgen einen Umbruch in die zweite Reihe ermöglichen. Habe das aber noch nicht probiert und es funktioniert nicht bei alten Browsern:

http://webkrauts.de/artikel/2011/css3-im-praxistest-multi-column-layout