CSS3多列列表 [英] CSS3 multi-column list

问题描述

我已经使用CSS3多栏目为几个Wordpress网站现在，一件事，我发现excepteble但仍然我想知道如何解决的是，如果我把一个列表（有子项目）在collumns它不会保持列表的结构

I've been using CSS3 multi-column for a few Wordpress sites now and one thing that I find excepteble but still something I want to know how to fix is that if I put a list(with sub items) in the collumns that it won't keep the structure of the list

要清楚这个是HTML：

To make myself clear this is the 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显示类似这样的菜单。
但是有一个问题是，它把子列表项放在下一列，而该项的父项在上一列。

This is nice because it makes it possible in Wordpress to show menu's like this. But one thing that bugs me is that it places the Sub-list-items in the next column while the parent of that item is in the previous column.

这是可修复的吗？

在任何人说：为什么你不是做多个列表和自己的列（这是当我问问题的建议如何这样做是为了一个动态的Wordpress菜单，所以我不能控制菜单中有多少项。

Before anyone says: why don't you just make multiple lists and make your own columns(this was the suggestion when I asked the question how to do this) this is for a dynamic Wordpress menu so I have no controll over how many items are in the menu.

推荐答案

您的父项< li> display：inline-block; 似乎修复：

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

Here is a demo 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>

这篇关于CSS3多列列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！