Flexbox 不能水平工作（导航栏）答案

【问题标题】：Flexbox won't work horizontal (navigation bar)Flexbox 不能水平工作（导航栏）
【发布时间】：2022-11-21 01:54:33
【问题描述】：

首先，我是 CSS 的新手。

问题是我正在尝试在左侧做一个水平导航栏。但是我的 flexbox 不起作用，导航一直垂直。好像被锁了，不知道可不可以。

请问，如何使用 flexbox 制作水平导航栏？

HTML:

   <header>
    <nav>
      <ul>
        <li><a href="#">MENU</a></li>
        <li><a href="#">HISTORY</a></li>
        <li><a href="#">LEARN MORE</a></li>
      </ul>
  </nav>
    <h1>ORCA</h1>
   </header>

CSS：

nav, a {
  font-family: outfit-bold;
  color: black;
  font-size: 16px;
  text-decoration: none;
  display: flex;
}

当我放置“display: flex”时，我希望它是水平的，但它是垂直的。

我也放了 display: inline-block 但没有用。

how it is navigation bar vertical

【问题讨论】：

您必须将 flex 放在 ul 中，因为 li 标签是 ul 的子标签。

标签： css flexbox navigationbar

【解决方案1】：

ul {
  display: flex;
}

<header>
  <nav>
    <ul>
      <li><a href="#">MENU</a></li>
      <li><a href="#">HISTORY</a></li>
      <li><a href="#">LEARN MORE</a></li>
    </ul>
  </nav>
  <h1>ORCA</h1>
</header>

尝试将 display: flex 放在 ul 元素上。它会让孩子们排队

如果你想阅读关于 flexbox 的非常好的和详细的资源 - 请看这里 -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：