html - 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

让你的父母<li> display: inline-block;似乎“解决”了这个问题：

这是一个演示http://jsfiddle.net/DczVL/1/

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;
}

<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>
                <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>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
    </ul>
</div>