html - css 中的多级列表格式。根据列表项类别水平或垂直显示

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='menu-item-has-children')，因此使用正确的 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>

通过将其他列表更改为类似于具有子子列表的第二个列表的结构，您可以完成您正在寻找的内容。