wp_nav_menu 在 li 周围添加 div答案

【问题标题】：wp_nav_menu add div around liwp_nav_menu 在 li 周围添加 div
【发布时间】：2021-10-15 23:59:19
【问题描述】：

使用 wp_nav_menu，目前它在三列中，我需要的是两个 li 包裹在一个 DIV 中，第三个包裹在另一个 DIV 中。如果可以通过 CSS 完成，那就太好了，而不是为菜单自定义包装类。

不确定如何执行此操作，因此希望得到一些帮助。谢谢。

编辑：添加了使用 flex 的样式表。

====  ====  ====

to 

====  ==== 
====

ul {
    display: flex;
    flex-wrap: wrap;
}

ul li {
    flex-grow: 1;
    width: 33%;        
}

<ul>
    <li>
        One
        <ul>
            <li>1a</li>
            <li>1b</li>
            <li>1c</li>
        </ul>
    </li>

    <li>
        Two
        <ul>
            <li>2a</li>
            <li>2b</li>
        </ul>
    </li>

    <li>
        Three
        <ul>
            <li>3a</li>
            <li>3b</li>
            <li>3c</li>
        </ul>
    </li>
</ul>

to 

<ul>
    <div class="col-2">
        <li>
            One
            <ul>
                <li>1a</li>
                <li>1b</li>
                <li>1c</li>
            </ul>
        </li>

        <li>
            Two
            <ul>
                <li>2a</li>
                <li>2b</li>
            </ul>
        </li>
    </div>
    
    <div class="col-4">
        <li>
            Three
            <ul>
                <li>3a</li>
                <li>3b</li>
                <li>3c</li>
            </ul>
        </li>
    </div>
</ul>

【问题讨论】：

您必须在此处添加列表样式。它们是浮动的还是弹性项目、内联块等？解决方案取决于它。
当然@skobaljic，添加。目前正在使用 flex。
这能回答你的问题吗？ How to specify an element after which to wrap in css flexbox?

标签： html css wordpress

【解决方案1】：

如果您不希望更改 HTML 而只是使用 CSS，那么使用 CSS 网格而不是 flexbox 可能是您想要的。

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 200px;
        padding: 0;
        list-style: none;
    }
    ul > li:last-of-type {
        grid-column: 1 / 3;
    }
    ul ul,
    ul ul li {
        display: flex;
    }

<html>
<ul>
    <li>
        One
        <ul>
            <li>1a</li>
            <li>1b</li>
            <li>1c</li>
        </ul>
    </li>

    <li>
        Two
        <ul>
            <li>2a</li>
            <li>2b</li>
        </ul>
    </li>

    <li>
        Three
        <ul>
            <li>3a</li>
            <li>3b</li>
            <li>3c</li>
        </ul>
    </li>
</ul>
</html>

【讨论】：