html – CSS3多列列表

我一直在使用CSS3多列几个wordpress网站现在和一件事,我发现除了但仍然我想知道如何解决的是,如果我把一个列表(与子项目)在其中获得的collumns不要保留列表的结构

为了使自己清楚这是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 菜单,所以我没有控制多少项目在菜单中.

解决方法

让你的父母< li>显示：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>

html – CSS3多列列表

解决方法

猜你在找的HTML相关文章