如何在React项目中使用CSS/HTML将导航栏菜单项顶部对齐

你只需修改Navbar.css中的3处样式规则即可实现需求，不会影响原有logo垂直居中效果与移动端适配逻辑：

• 给.nav-menu类新增两条属性，清空默认上外边距，设置自身在flex父容器内顶部对齐：

.nav-menu {
  /* 原有其他规则保持不变，新增以下两行 */
  margin-top: 0;
  align-self: flex-start;
}

• 修改.nav-links类的属性，移除顶部内边距，调整内部文字对齐方向为顶部对齐：

.nav-links {
  /* 原有其他规则保持不变，修改padding和align-items如下 */
  padding: 0 1rem 0.5rem 1rem;
  align-items: flex-start;
}

• 若需要菜单完全贴死导航栏最顶部，可给.nav-menu额外添加padding-top: 0属性即可。

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