使 div 在 flex 容器中

Question

我正在尝试为导航栏实现以下响应行为。

这是我在大屏幕上想要的结果：

在小屏幕上（iPhone 8 和类似设备）：

我使用 flexbox 创建了导航栏，我想到的可能解决方案是使用 flex-wrap: wrap; 但我需要找到一种方法，只在屏幕较小时使两个链接（带有 tmp 类）关闭，并在屏幕较小时保持徽标和“S'inscrire”链接。

我不确定 flexbox 是否是实现这一目标的最佳方式，但这是我尝试过的，我愿意接受任何更好的解决方案。

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
}

.tmp {}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media only screen and (max-width: 500px) {
    .navigation__items {
        margin-top: 25px;
        width: 100%;
    }
}

<nav class="navigation">
   <img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
   <ul class="navigation__items">
      <div class="tmp">
         <li class="navigation__item"><a href="#">Hébergements</a></li>
         <li class="navigation__item"><a href="#">Activités</a></li>
      </div>
      <li class="navigation__item subscribe">
         <a href="#">S'inscrire</a>
      </li>
   </ul>
</nav>

PS：带有“tmp”类的div最初不存在于代码中，我添加它只是为了表明我的想法。

Answer 1

注意你的HTML的结构<ul>标签。在里面放置<div>标签，将第三个<li>标签与前两个标签分开。这是不正确的，它不是有效的html结构。这是拐杖。

在我的示例中，我正确设置了列表结构。所有三个<li>标签现在都是标签的子<ul>标签。

现在关于主要的事情。

第三个<li>标签（订阅类）的传输原理正是基于绝对定位。

包装前两个<li>标签在767px宽度处触发。

然而，在我的示例中，我没有使用其他类型的显示，例如grid、table、block等。只使用了flex。

此外，点击时的下划线也进行了调整。

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation img { /*for test*/
    width: 100px;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media (max-width: 500px) {
    .navigation__items {
        margin-top: 25px;
        /*width: 100%;*/
    }
}

@media (max-width: 767px) {
    .navigation {
        position: relative;
    }
    
    .navigation__items {
        width: 100%;
    }
    
    .navigation__item a {
        display: flex;
        justify-content: center;
        padding: 11px 0;
    }
    
    .navigation__item {
        flex: auto;
        text-align: center;
    }
    
    .navigation__item.subscribe {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .navigation__item a:active {
        border-top: unset;
        border-bottom: 2px solid #0065fc;
    }
}

<nav class="navigation">
    <img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
    <ul class="navigation__items">
        <li class="navigation__item"><a href="#">Hébergements</a></li>
        <li class="navigation__item"><a href="#">Activités</a></li>
        <li class="navigation__item subscribe"><a href="#">S'inscrire</a></li>
    </ul>
</nav>