CSS - 具有动态列包装的单个列表

Question

可能重复:
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>
    
    
   

这是小提琴:http://jsfiddle.net/im_benton/tHjeJ/

你觉得我的解决方案怎么样？什么是适用于IE的解决方案？

Answer 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/