Question

我正在使用wordpress开发网站，我在页脚中添加了我网站的主菜单。我想按以下方式格式化列表，所以我需要使用自定义css：

Page 1      Page 2                          Page 3      Page 4      Page 5
Page 1.1    Page 2.1 (bold) Page 2.2 (bold) Page 3.1    Page 4.1
Page 1.2    Page 2.1.1      Page 2.2.1      Page 3.2    Page 4.2
Page 1.3    Page 2.1.2      Page 2.2.2      Page 3.3
Page 1.4    Page 2.1.3      Page 2.2.3      Page 3.4
Page 1.5    Page 2.1.4      Page 2.2.4      Page 3.5
                                            Page 3.6

总结一下：

第一级列表应水平显示
第二级列表应垂直显示，除非某些列表元素具有子级。这些应该水平显示并使用大胆的喜欢。
第三级列表应垂直显示在其父级下方二级项目。

我的wordpress主题生成html代码并为包含一些孩子的列表项提供特定的类（class =＆＃39; menu-item-has-children＆＃39;），所以使用正确的css选择器，我应该可以做到，但我没有找到如何。

这是我的代码：https://jsfiddle.net/aqt9vw4u/

有人可以解释一下如何格式化我的列表。

Answer 1

首先，您需要重新组织列表，以便使用相同的层次结构。由于您将要有某些列表具有子列表，因此无论它们是否具有子列表，都需要设置相同的列表。然后，一旦你解决了这个问题，就可以列出一些使用flexbox最简单的方向。由于这是wordpress，您的模板应该能够判断列表是否包含子项，然后是否回显标题。

https://jsfiddle.net/aqt9vw4u/3/

<ul class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-4578"><a href="#">Page 1</a>
    <ul class="sub-menu">
        <li id="menu-item-number" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-no-children menu-item-number">
            <ul class="sub-menu">
                <li id="menu-item-4357" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2783 current_page_item menu-item-4357"><a>Page 1.1</a></li>
                <li id="menu-item-4358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4358"><a>Page 1.2</a></li>
                <li id="menu-item-4365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4365"><a>Page 1.3</a></li>
                <li id="menu-item-4359" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4359"><a>Page 1.4</a></li>
                <li id="menu-item-4360" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4360"><a>Page 1.5</a></li>
            </ul>
        </li>
    </ul>
</li>

通过将您的其他列表更改为具有子子列表的第二个列表，您可以完成您要查找的内容。

css中的多级列表格式。根据列表项类

1 个答案: