html - 菜单的定位，菜单项自动相互分隔成两行

对于移动网站，我需要一个构造来获得如下结果。我们使用 CMS，所以我有一些自动生成的 HTML。

<ul>
<li>
    <a href="#">Main item 1</a>
    <ul>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
    </ul>
</li>
<li>
    <a href="#">Main item 2</a>
    <ul>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
    </ul>
</li>
<li>
    <a href="#">Main item 3</a>
    <ul>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
    </ul>
</li>

使元素 float 或显示内联 block 并不能解决问题。

是否可以使用此 HTML 执行此操作，或者我是否创建两列并将菜单项分布到每一列？

我创建了一个 CodePen:CodePen

最佳答案

如果您希望它尽可能节省空间地排列，我会使用砌体库。

这是一个示例库: https://github.com/desandro/masonry

关于html - 菜单的定位，菜单项自动相互分隔成两行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34525544/