为何display:flex不生效？导航栏元素无法同行对齐问题

你的问题核心是父容器未设置flex布局，同时HTML存在语法错误（class属性缺失引号），导致两个导航区块默认以块级元素换行显示，最终出现标题位置偏高、无法同行对齐的问题。以下是修复方案：

1. 修正HTML语法与结构 #

先给class属性补充引号（符合HTML规范），确保后续CSS能正确选中元素：

<nav>
  <div class="navBar">
    <ul>
      <div class="titnav">
        <!-- 标题 -->
        <li><a href="">PortoHub</a></li>
      </div>
      <div class="mainnav">
        <!-- 导航项 -->
        <li><a href="">About</a></li>
        <li><a href="">Experience</a></li>
        <li><a href="">Project</a></li>
        <li><a href="">Contact</a></li>
      </div>
    </ul>
  </div>
</nav>

2. 调整CSS实现同行对齐 #

给nav ul添加flex布局，让两个子区块在同一行左右分布，同时设置垂直居中解决标题偏高问题：

/* NAV */
nav{
  position: sticky; 
  top: 0;
  backdrop-filter: blur(45px);
  font-size: 20px;
}
nav ul{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  color: white;
  font-family: Cascadia Code;
  /* 关键：让ul成为flex容器，控制子元素布局 */
  display: flex;
  justify-content: space-between; /* 左右两端分布 */
  align-items: center; /* 垂直居中对齐，解决标题偏高 */
}
nav a{
  padding: 15px;
  text-align: center;
  text-decoration: none;
}

.titnav{
  display: flex;
  justify-content: flex-start;
}
.mainnav{
  display: flex;
  justify-content: flex-end;
}

可选：规范HTML结构（推荐） #

由于div不是ul的合法子元素（ul仅允许包含li），可以进一步优化结构，让代码更符合标准：

<nav>
  <div class="navBar">
    <ul>
      <li class="titnav">
        <a href="">PortoHub</a>
      </li>
      <li class="mainnav">
        <a href="">About</a>
        <a href="">Experience</a>
        <a href="">Project</a>
        <a href="">Contact</a>
      </li>
    </ul>
  </div>
</nav>

对应的CSS调整：

.titnav{
  display: flex;
  align-items: center;
}
.mainnav{
  display: flex;
  gap: 0; /* 可自定义导航项间距 */
}

调整后，标题与导航项会在同一行垂直居中对齐，完全满足你的需求。

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