水平对齐的项目及其子级在两个组中，不留多余的空间

Question

我在需要我的ul li以50％的宽度水平排列且li的子子项在其下面的项目中工作

[我知道有些人会说尝试CSS砌体，但是它可以在IE中工作，我已经看了很多教程，但是我仍然不清楚如何在此处实现该方法]

我的问题开始于左侧有子孩子而右侧没有子孩子，然后li的右边在两个li之间保持间隔。有时li的顺序不匹配

注意：我也需要IE 11支持！！这是我的HTML

<style>
        .level1 {
            float: left;
        }

        .level1>li {
            float: left;
            padding: 20px;
            width: 50%;
        }

        .level1>li>ul {
            padding-left: 20px
        }
    </style>



<ul class="level1">
        <li>Level</li>

        <li>Level2
            <ul class="level2">
                <li>Level1</li>
                <li>Level2</li>
            </ul>
        </li>

        <li>Level3</li>
        <li>Level4</li>
        <li>Level5</li>
        <li>Level6</li>
    </ul>

我的输出

如图所示，无论level2拥有多少子级，我都不希望level1和level3之间有空间，如果level1拥有n个子级，那么level2和level 4则不然

我在需要我的ul li以50％的宽度水平排列的项目中工作，并且li的子孩子应该在它下面，我知道有些人会说尝试CSS砌体，但是会起作用吗...

Answer 1

我认为您正在寻找CSS砌体，可以根据需要根据列或行进行调整。