CSS 根据网页宽度在多列中显示带有 LI 元素的多个 UL 列表的技巧

Question

对于一个 HTML 游戏网站，我在每个页面的底部显示了几个 UL 列表：

<h2>How to play?</h2>

<ul>
    <li><a href="/en/ws/google">Via Google</a></li>
    <li><a href="/en/ws/apple">Via Apple</a></li>
    <li><a href="/en/ws/facebook">Via Facebook</a></li>
    <li><a href="/en/ws/amazon">Via Amazon</a></li>
    <li><a href="/en/ws/huawei">Via Huawei</a></li>
</ul>

目前列表只是一个显示在另一个之上：

在某些 Wordpress 主题中，当网页足够宽时，我可以看到列表彼此靠近显示：

有人可以推荐一个 CSS 技巧吗？

很难理解 Wordpress 是如何做到的，我也尝试过搜索，但是关键字太常见了，无法找到解决我问题的好方法。

更新：

我遵循了 Majicman02 现已删除的（为什么？）建议（谢谢！）并尝试使用 Flexbox:

#footer {
    display: flex;
    flex-wrap: wrap;
}

<div id="footer">
    <h2>How to play?</h2>

    <ul>
        <li><a href="/en/ws/google">Via Google</a></li>
        <li><a href="/en/ws/apple">Via Apple</a></li>
        <li><a href="/en/ws/facebook">Via Facebook</a></li>
        <li><a href="/en/ws/amazon">Via Amazon</a></li>
        <li><a href="/en/ws/huawei">Via Huawei</a></li>
    </ul>

    <h2>Mobile game version</h2>

    <ul>
        <li><a href="/en/ws/android">For Android</a></li>
        <li><a href="/en/ws/ios">For iOS</a></li>
    </ul>

    <h2>Where to talk?</h2>

    <ul>
        <li><a href="https://facebook.com/groups/12345/">At Facebook</a></li>
    </ul>

    <h2>Other languages</h2>

    <ul>
        <li><a href="/de/ws">My word game (German)</a></li>
        <li><a href="/ru/ws">My word game (Russian)</a></li>
    </ul>

    <h2>Legal documents</h2>

    <ul>
        <li><a href="/en/ws/tos">Terms of service</a></li>
        <li><a href="/en/ws/privacy">Privacy policy</a></li>
        <li><a href="/de/ws/imprint">Impressum</a></li>
        <li><a href="/de/ws/dsgvo">Datenschutzerkl&auml;rung</a></li>
    </ul>
</div>

从使用整个网页宽度的意义上来说，结果看起来不错。

但是如何将 h2-header 保持在 ul-lists 之上？

Answer 1

好的，我已经使用 flex-wrap 属性的 flexbox 使我的 multi-columned 网页页脚正常工作。

此外，我不得不用 DIV 包裹我的 H2-headers 和 UL-lists 以防止它们分开：

#footer {
    display: flex;
    flex-wrap: wrap;
}

#footer > div {
    padding: 8px;
}

<div id="footer">
    <div>
        <h2>How to play?</h2>

        <ul>
            <li><a href="/en/ws/google">Via Google</a></li>
            <li><a href="/en/ws/apple">Via Apple</a></li>
            <li><a href="/en/ws/facebook">Via Facebook</a></li>
            <li><a href="/en/ws/amazon">Via Amazon</a></li>
            <li><a href="/en/ws/huawei">Via Huawei</a></li>
        </ul>
    </div>

    <div>
        <h2>Mobile game version</h2>

        <ul>
            <li><a href="/en/ws/android">For Android</a></li>
            <li><a href="/en/ws/ios">For iOS</a></li>
        </ul>
    </div>

    <div>
        <h2>Where to talk?</h2>

        <ul>
            <li><a href="https://facebook.com/groups/12345/">At Facebook</a></li>
        </ul>
    </div>

    <div>
        <h2>Other languages</h2>

        <ul>
            <li><a href="/de/ws">My word game (German)</a></li>
            <li><a href="/ru/ws">My word game (Russian)</a></li>
        </ul>
    </div>

    <div>
        <h2>Legal documents</h2>

        <ul>
            <li><a href="/en/ws/tos">Terms of service</a></li>
            <li><a href="/en/ws/privacy">Privacy policy</a></li>
            <li><a href="/de/ws/imprint">Impressum</a></li>
            <li><a href="/de/ws/dsgvo">Datenschutzerkl&auml;rung</a></li>
        </ul>
    </div>
</div>

此外，我在 #footer children DIV elements 周围添加了一些填充。

CSS 根据网页宽度在多列中显示带有 LI 元素的多个 UL 列表的技巧

CSS trick to display several UL lists with LI elements in multiple columns, depending on the webpage width

html

css

multiple-columns

flexbox