CSS - Единый список с динамической упаковкой столбцов

Возможный дубликат:
CSS: Способы разбить список на столбцы на странице?

Я искал это решение и не мог его найти, поэтому я думал, что опубликую то, что я закончил.

Я пытался создать единый список, где после 5-го элемента список будет переноситься и перемещаться в другой столбец. Это так, что он может быть супер динамичным с количеством элементов, которые нужны пользователю.

Вот решение, которое я придумал.

 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>

Ответ 1

Попробуйте использовать следующее в качестве предлагаемого @tuff.

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/

Ответ 2

Это не так сложно, если вам просто нужны два столбца Вы можете попробовать что-то вроде этого в своем списке:

ol{ width:300px;}

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

На самом деле он будет переносить равное количество элементов списка в каждом столбце, если число li делит на номер столбца.

Если вы хотите, чтобы нумерация была похожа на ваше изображение, вы можете использовать разделители для каждого столбца, а затем использовать атрибут start в своем списке... это будет что-то вроде start="6"