时间戳

首页 > 解决方案 > wp_nav_menu 在 li 周围添加 div

html - wp_nav_menu 在 li 周围添加 div

问题描述

使用 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>

标签： htmlcsswordpress

解决方案

如果您不想更改 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>

推荐阅读