CSS设置margin-left:auto导致元素溢出容器，导航栏对齐问题求解

算力阿峰

2026-10-3

导航栏元素溢出容器解决方案

问题原因

浏览器默认给ul设置了预设内外边距，你没有做重置，挤压了.navul的可用内部空间
<a>标签为行内元素，上下padding不会被计入元素实际高度，只会向外溢出，同时你给.navul固定了50px高度，没有设置flex子项垂直对齐规则，导致元素错位溢出
.navli1设置的margin: auto会同时在上下左右四个方向分配自动外边距，干扰垂直方向对齐，同时会将第一个li向水平中间挤压，第二个li被推到最右侧边界外

修复代码

你可以直接替换原CSS代码即可解决问题：

/* 重置浏览器默认边距和盒模型规则 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navul {
  display: flex;
  height: 50px;
  background-color: rgb(71, 71, 71);
  /* 让子元素垂直居中 */
  align-items: center;
}

.navli1 {
  /* 仅保留水平方向自动外边距，实现Home居中效果 */
  margin-inline: auto;
}

.navli2 {
  margin-left: auto;
}

.navlink {
  text-decoration: none;
  color: white;
  background-color: rgb(0, 0, 0);
  padding: 16px 25px;
  /* 将a转为块级元素，让padding正常计入元素高度，避免溢出 */
  display: block;
}

.navlink:hover {
  color: rgb(175, 175, 175);
}

ul {
  list-style: none;
}