如何消除页面中两个相邻ul列表之间的多余间距

DevOps 小满

2026-8-30

问题原因

两个无序列表之间的空隙是浏览器为<ul>元素预设的默认上下外边距导致的。块级元素相邻时上下外边距会发生叠加，最终呈现出两段列表之间的多余空白。另外你代码中使用的<center>是已被废弃的HTML标签，不建议在现代页面开发中使用。

修复步骤

第一步：重置<ul>的默认外边距和内边距，直接清除浏览器默认样式带来的空隙
第二步：移除废弃的<center>标签，改用CSS的text-align: center实现logo居中效果
第三步：（可选优化）你当前给li设置的padding: 10%是相对于父元素宽度计算的，在导航场景下很容易出现尺寸异常，建议替换为固定像素/rem单位的内边距。

完整修改后代码

HTML部分

<div>
  <ul class="top-header">
    <li>
      Hi
    </li>
  </ul>
  <ul class="second-header">
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about"> About</Link>
    </li>
    <li>
      <Link to="/boys">Boys</Link>
    </li>
    <li>
      <Link to="/Girls">Girls</Link>
    </li>
  </ul>
</div>

CSS部分

/* 重置列表默认浏览器样式 */
ul {
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
  display: inline;
  /* 替换原百分比padding，可根据设计需求调整数值 */
  padding: 12px 24px;
}

.top-header{
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center; /* 实现logo居中，替代<center>标签 */
}

.second-header{
  background-color: rgba(0, 0, 0, 0.2);
  /* 如果导航链接也需要居中，放开下面这行注释即可 */
  /* text-align: center; */
}