如何用CSS将Header中的Logo完全左对齐？

嘿，我来帮你搞定这个Logo左对齐的问题！这种情况大多是因为HTML元素的默认样式（比如列表的内边距）或者布局设置在捣乱，咱们一步步来调整：

1. 清除左侧导航列表的默认样式 #

<ul> 标签默认自带左内边距（通常是 40px 左右），这会直接把Logo往右边挤。咱们先把这个默认样式清掉：

#left-nav {
  margin: 0;
  padding-left: 0;
  list-style: none; /* 既然列表里只有Logo，顺便去掉默认的圆点标记 */
}

2. 重置Header的内边距与外边距 #

如果你的Header本身设置了内边距，也会让Logo无法贴到最左侧。同时用Flex布局来排列左右导航，能更精准控制对齐：

header {
  margin: 0;
  padding: 0;
  display: flex; /* 启用Flex布局，方便排列左右导航 */
  align-items: center; /* 让Logo和右侧导航保持垂直居中 */
  width: 100%; /* 确保Header占满父容器的宽度 */
}

3. 确保Logo元素无额外间距 #

还要检查Logo所在的<li>和图片本身，避免它们自带的外边距或行内间距影响对齐：

#left-nav li {
  margin: 0;
  padding: 0;
}

.logo {
  display: block; /* 把图片转为块级元素，消除行内元素的默认间距 */
  margin: 0;
}

4. 让左右导航分别靠两端（可选） #

如果你的Header是左侧Logo、右侧导航的经典布局，给Header加上这个属性，让右侧导航自动靠最右边：

header {
  justify-content: space-between;
}

做完这些调整后，Logo应该就能完全靠左对齐了。如果还是有问题，可以检查一下Header的父容器有没有设置额外的内边距，或者有没有其他CSS规则覆盖了这些样式~

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