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中显示这样的菜单.但有一点让我感到困惑的是,它将Sub-list-items放在下一列中,而该项的父项位于上一列中.

这可以解决吗？

在有人说之前:你为什么不制作多个列表并制作自己的专栏(这是我在问这个问题时的建议)这是一个动态的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>