如何用CSS实现HTML header内<a>与<nav>内容左右分栏？

你的.content容器已经设置了display: flex，这是正确的方向，但存在两个关键问题：

• .desktop类样式同时作用于logo和导航栏，导致导航文字被错误放大
• 没有给导航容器（<nav>）设置自动左外边距，无法利用flex布局实现左右分布

修改后的完整CSS代码 #

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
}

header .content {
  display: flex;
  align-items: center;
  padding: 1.875rem;
}

/* 仅给Logo应用大字体样式，避免影响导航 */
header .desktop.logo {
  font-family: Roboto-Mono-Regular;
  font-size: 2rem;
  color: #4a4a4a;
}

/* 让导航容器在flex布局中自动靠右 */
header nav.desktop {
  margin-left: auto;
}

header nav ul {
  display: flex;
  font-size: 1rem;
  font-family: Roboto-Regular;
  line-height: 1.6;
}

nav li {
  padding-left: 3.5rem;
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
}

关键调整说明 #

1. 修复样式冲突：用复合选择器.desktop.logo替代原有的.desktop，确保2rem的大字体只作用于Logo，导航栏文字保持正常大小。
2. 实现左右分布：给<nav>设置margin-left: auto——在flex容器中，这个属性会让容器自动将剩余空间分配到元素的左侧，从而把导航栏推到最右侧，Logo自然留在左侧。
3. 为什么之前的尝试无效：
   • 给header加margin-left:auto没用，因为header不是flex子元素
   • 给ul加margin-left:auto无效，因为ul的父元素nav不是flex容器，块级元素内的margin-left:auto只会让元素自身居中，无法实现靠右布局

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