CSS新手求助：Flexbox无法实现水平导航栏问题解决

你的问题出在flex布局的目标元素选错了——你把display:flex加在了nav和a标签上，但真正需要设置flex的是包裹导航项的<ul>容器，因为<li>是它的直接子元素，只有给父容器<ul>设置flex，才能让子元素横向排列。

修正后的完整代码 #

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

/* 先重置ul的默认浏览器样式 */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 核心：给ul设置flex，让li水平排列 */
  display: flex;
  /* 可选：设置导航项之间的间距 */
  gap: 20px;
}

/* 导航文字样式单独设置 */
nav a {
  font-family: outfit-bold;
  color: black;
  font-size: 16px;
  text-decoration: none;
}

为什么之前的设置无效？ #

1. 给nav加display:flex：nav的直接子元素只有<ul>，所以只会让<ul>在nav里横向排列（flex默认方向为row），但<ul>本身还是块级元素，里面的<li>依然会垂直排列。
2. 给a加display:flex：a是<li>的子元素，这个设置只会影响a内部的内容布局，完全不影响<li>的排列方式。

如果要让导航栏靠左对齐（你提到的左侧水平导航），上面的代码已经默认实现，flex布局默认的justify-content值就是flex-start。如果需要调整间距或对齐方式，直接在nav ul里添加对应的flex属性即可。

内容的提问来源于stack exchange，提问作者Falkor