导航栏列表显示：flex 不弯曲 [重复]答案

【问题标题】：Navbar list display:flex does not flex [duplicate]导航栏列表显示：flex 不弯曲 [重复]
【发布时间】：2022-01-25 12:26:41
【问题描述】：

我想水平对齐导航栏列表，所以使用了flex-direction: row 代码，但它不起作用也许我认为标签选择有误，所以我尝试将其更改为.nav-list ul，.nav-list ul li

但它不会弯曲

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgb(114, 209, 209);
}

.nav-logo {
  font-size: 1rem;
  color: #fff;
}

.nav-logo i {
  color: yellow;
}

.nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: #fff;
}

.nav-list ul {
  list-style: none;
}

.icons {
  padding: 50em;
}

<div class="navbar">
  <div class="nav-logo">
    <h1><i class="fab fa-accusoft"></i>Azure Coding</h1>
  </div>
  <div class="nav-list">
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>plan</a></li>
      <li><a>FAQ</a></li>
    </ul>
  </div>
  <div class="nav-icons">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您需要将这些规则从 .nav-list 移动到 .nav-list ul，因为 display: flex 仅适用于父级

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(114, 209, 209);
}

.nav-logo {
  font-size: 1rem;
  color: #fff;
}

.nav-logo i {
  color: yellow;
}

.nav-list ul {
  display: flex;
  justify-content: space-around;
  color: #fff;
  list-style: none;
}

.icons {
  padding: 50em;
}

<div class="navbar">
  <div class="nav-logo">
    <h1><i class="fab fa-accusoft"></i>Azure Coding</h1>
  </div>
  <div class="nav-list">
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>plan</a></li>
      <li><a>FAQ</a></li>
    </ul>
  </div>
  <div class="nav-icons">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
  </div>
</div>

【讨论】：

【解决方案2】：

nav-list 中只有一个孩子是 ul，你需要将 display:flex 赋予 ul

.nav-list ul{ display:flex; } 这应该可以解决问题

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。