List CSS–；带有动态列换行的单个列表

可能重复：

我正在寻找这个解决方案，但找不到，所以我想我会发布我最终制作的内容

我试图建立一个单一的列表，在第5项之后，列表将包装并移动到另一列中。这是因为它可以超级动态地显示用户需要多少项

这是我想出的解决办法

li{
位置：相对位置；
线高：-6px；
}
ol li:第n个孩子（6）{
利润上限：-90px；
}
ol li:第n个孩子（-n+5）{
左边距：0em；
}
ol li:第n个孩子（n+6）{
左边距：10em；
}

芦荟
佛手柑
金盏花
达米亚纳
接骨木
发烧
生姜
啤酒花
虹膜
杜松

尝试使用@tuff建议的以下方法

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

---

如果你只想要两列，就没那么难了 您可以在列表中尝试以下内容：

ol{ width:300px;}

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

若li数除以列数，它实际上会在每列中包装相同数量的列表项

---

如果您希望像图片上那样进行计算您可以对每列使用换行div，然后在列表上使用

start

属性……这类似于

start=“6”

您是否检查了这个问题？这只在您不关心列表顺序的情况下有效。如果列表中的项目超过5个，我只希望列表移动到新列。请在粗体文本后阅读…使用ol start属性。这对你有帮助吗？谢谢你的帮助，但我一直在寻找一种不用申报新的div或ul的方法。事实证明，我只需要在php逻辑中完成它，这可能是一个更好的解决方案。是的，在php中完成它会更简单、更方便compatible@BorisD.Teoharov“浏览器兼容”，我不认为这些东西，如果你在后端为浏览器做所有的工作布局，你根本不会要求浏览器做任何与兼容性相关的事情。支持不是很好：支持很好，但目前Chrome充满了怪癖和bug。