时间戳

首页 > 解决方案 > 如何将 4 个元素 2 x 2 弯曲包装

html - 如何将 4 个元素 2 x 2 弯曲包装

问题描述

我试图将我的徽标“Reservia”和我的 LI“S'inscrire”放在同一行，并将我的另外 2 个 LI“Hebergement”和“Activités”包装在第一个下面的一行中，但它不起作用。

这是我的标题

<header>
    <div id="containerHeader">
        <img src="images/logo/Reservia.svg" class="test" alt="Logo reservia">
        <nav class="Navmenu">
            <ul class="liMenu">
                <li class="liMenu--list liMenu--list_nocolor">
                  <a href="#containerHebergement" class="link--navbar">Hebergement</a>
                </li>
                <li class="liMenu--list liMenu--list_nocolor">
                  <a href="#containerActivites" class="link--navbar">Activités</a>
                </li>
                <li class="liMenu--list liMenu--list_blue">
                  <a href="#" class="link--navbar test">S'inscrire</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

这是我的 CSS

#containerHeader{
    flex-wrap: wrap;
}
.navMenu,
.liMenu {
    justify-content: center;
    padding-right: 80px;
}
.liMenu--list {
    list-style: none;
}
.test{
    order: -1;
}
.link--navbar {
    border-bottom: 4px solid lightgrey;
    border-top: none;
    padding-bottom: 15px;
}

.link--navbar:hover {
    border-top: none;
}

我放了我的 2 张截图（它的样子和我想要的）:)

非常感谢

它看起来像什么

我想要的是

标签： htmlcssflexbox

解决方案

img, li {
  width: 50%
}

尝试为 img 和 li 元素添加 50% 的宽度。这将确保单个元素占据一半宽度，这将导致每行两个元素。

如果您想为不同的设备提供不同的外观，您可能需要使用媒体查询。

推荐阅读