CSS - Einzel Liste mit dynamischer Spalte

Question

Einwickeln

Mögliche Duplizieren:
CSS: Ways to break list into columns on page?

ich für diese Lösung suchte und fand es nicht so dachte ich, ich würde schreiben, was ich am Ende machen.

Ich habe versucht, eine einzige Liste zu erstellen, wo nach dem fünften Punkt die Liste umbrochen und in eine andere Spalte verschoben würde. Dies ist so, dass es super dynamisch sein kann mit wie viele Elemente der Benutzer braucht.

Hier ist die Lösung kam ich mit.

li{ 
 
    position: relative; 
 
    line-height: -6px; 
 
} 
 
    
 
ol li:nth-child(6) { 
 
    margin-top: -90px; 
 
} 
 
    
 
ol li:nth-child(-n+5){ 
 
    margin-left: 0em; 
 
} 
 
    
 
ol li:nth-child(n+6){ 
 
    margin-left: 10em; 
 
}

<ol> 
 
     <li>Aloe</li> 
 
     <li>Bergamot</li> 
 
     <li>Calendula</li> 
 
     <li>Damiana</li> 
 
     <li>Elderflower</li> 
 
     <li>Feverfew</li> 
 
     <li>Ginger</li> 
 
     <li>Hops</li> 
 
     <li>Iris</li> 
 
     <li>Juniper</li> 
 
</ol> 
 
    
 
    
 

Hier ist der Fiddle: http://jsfiddle.net/im_benton/tHjeJ/

Was halten Sie von meiner Lösung denken ?? Was ist eine Lösung, die in IE funktioniert?

Answer 1

Versuchen Sie Folgendes wie @tuff vorgeschlagen.

ol { 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
} 

http://jsfiddle.net/tHjeJ/6/

Answer 2

Es ist nicht so schwer, wenn Sie zwei Spalten nur wollen Sie so etwas wie dieses auf Ihrer Liste könnten versuchen:

ol{ width:300px;} 

li{ 
    width:50%; 
    float:left; 
}​ 

Es wäre tatsächlich gleiche Anzahl von Listenelementen umwickeln jede Spalte, wenn die li-Nummer durch die Spaltennummer dividiert wird.

Wenn Sie Numerierung wie auf dem Bild sein möchten Sie Einwickeln divs für jede Spalte verwenden könnte und dann mit dem start Attribut auf Ihrer Liste ... wird es so etwas wie start="6"