我一直在使用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>
