CSS3 多列列表

Posted 2023-03-05

【中文标题】CSS3 多列列表

【英文标题】：CSS3 multi-column list

【发布时间】：2014-04-27 12:34:48

【问题描述】：

我现在已经在几个 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 菜单，所以我无法控制如何菜单中有很多项目。

【参考方案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>