水平对齐 li 项目及其子项在两组中不留额外 space

Question

我正在做一个项目，我需要我的 ul li 以 50% 的宽度水平对齐显示，li 的子 child 应该在它下面

我知道有些人会说尝试 CSS masonry，但它能在 IE 中工作吗？我已经学习了很多教程，但我仍然不清楚如何在此处实施该方法

当左侧有子 child 而右侧没有时，我的问题就开始了，然后 li 的右侧将 space 保持在两个 li.Also 之间，有时 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>

我的输出

如图所示，我不希望 level1 和 level3 之间有 space，无论 level2 有多少 child，如果 level1 有 n [=30，则 level2 和 level 4 反之亦然=]

Answer 1

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

另外给出一些link的jsfiddle供大家参考

这里是你的代码修改后的解决方案：

<style>
        .level1 {
         position:relative;
         -moz-column-count: 2;
        -moz-column-gap: 3%;
        -moz-column-width: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 3%;
        -webkit-column-width: 50%;
        column-count: 2;
        column-gap: 3%;
        column-width: 50%;

        }

        .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>

希望它对你有用！

水平对齐 li 项目及其子项在两组中不留额外 space

horizontal align li items with subchild of it in two group without leaving extra space

html

css

html-lists