CSS3多列列表

Question

我现在一直在为一些Wordpress网站使用CSS3多列，我发现一件事情，但我还想知道如何修复，如果我把一个列表（包含子项）放入它不会保留列表结构的柱子

要清楚这是HTML：

<div>
<ul>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul>
   </li>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul
   </li>
</ul>
</div>

CSS将是：

div{
-webkit-column-count:3;   
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;   
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

这就是你得到的：

这很好，因为它可以在Wordpress中显示菜单，就像这样。 但有一点让我感到困惑的是，它将子列表项放在下一列中，而该项的父项位于上一列中。

这可以修复吗？

在有人说之前：为什么不要制作多个列表并制作自己的专栏（这是我在问这个问题时的建议）这是一个动态的Wordpress菜单所以我没有控制权菜单中有多少项。

Answer 1

让您的父[{1}} <li>似乎“修复”了这个问题：

以下是演示http://jsfiddle.net/DczVL/1/

display: inline-block;

ul {
    list-style: none;
    margin:0;
    padding:0;
}
ul > li {
    display: inline-block;
    width: 100%;
}
ul > li > ul >li {
    color: red;
}
div {
    -webkit-column-count:3;
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}