11

可能重复：
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 的解决方案？

4

2 回答 2

26

尝试按照@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/

于 2012-10-19T19:17:42.543 回答
0

如果你只想要两列，这并不难你可以在你的列表中尝试这样的事情：

ol{ width:300px;}

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

如果 li 数除以列号，它实际上会在每列中包含相等数量的列表项。

如果您希望数字像在您的图片上一样，您可以为每一列使用包装 div，然后使用start列表中的属性...它将类似于start="6"

于 2012-10-19T19:31:15.553 回答