如何居中导航菜单的ul元素？解决ul与navigation__wrapper间空隙问题

问题描述 #

我找到一个移动端导航菜单模板，将代码粘贴到本地HTML编辑器测试时，发现ul元素与class="navigation__wrapper"的菜单容器之间存在空隙（已用红框标注）。该空隙在模板的在线预览中未显示，但本地HTML文件在浏览器中会出现。我尝试为navigation__wrapper、ul和li元素设置align-items: center;及align="center"属性，然而空隙始终存在。

原因分析 #

这个空隙是浏览器默认给<ul>元素添加的**外边距（margin）**导致的。在线预览平台默认会引入CSS重置样式（如Normalize.css），清除了元素的默认边距；但本地HTML文件没有加载这类重置样式，所以浏览器的默认样式就会生效，显示出空隙。

解决方法 #

1. 给.navigation__links添加margin: 0;，直接清除它的默认外边距；
2. 修正CSS中的拼写错误：text-alig:center;改为text-align:center;（此错误不影响空隙，但会导致列表项文字无法居中）。

修改后的完整代码 #

HTML代码 #

<nav role="navigation" class="navigation">
  <div class="navigation__logo">
    <a href="/"> 
        <p>Logo</p>   <!-- 此处替换为你的Logo -->
    </a>
  </div>
  <div class="navigation__wrapper">
    <input type="checkbox" id="hamburger">
    <label for="hamburger" class="navigation__button">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <ul class="navigation__links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CSS代码 #

.navigation{
  position:relative;
  height:80px;
  padding:0 15px;
  background-color: #00688B;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navigation__logo a{
  text-decoration:none;
}
.navigation__logo p{
  color:#ffffff;
  font-weight: bolder;
  text-transform: uppercase;
  text-decoration: none;
}
.navigation__links{
  position: absolute;
  width:300px;
  height:100vh;
  left:-1000px;
  top:0;
  z-index:2;
  transition: left 0.3s ease-in;
  background:#00688B;
  color:#ffffff;
  list-style: none;
  box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.75);
  margin: 0; /* 新增：清除默认外边距 */
}
.navigation__links li{
  padding: 5px 10px;
  text-align:center; /* 修正拼写错误 */
  border-bottom:1px solid rgba(255,255,255, 0.3);
}
.navigation__links a{
  color: #ffffff;
  text-decoration:none;  
}

#hamburger{
  visibility:hidden;
}
.navigation__button{
  position:relative;
  display: inline-block;
  width: 30px;
  height:30px;
  background:transparent;
  border:1px solid #ffffff;
  cursor:pointer;
}
.navigation__button span{
  position:absolute;
  left: 5px;
  display:inline-block;
  width:20px;
  height:1px;
  background-color: #ffffff;
  transform-origin:center;
  transition: opacity 0.2s linear, all 0.3s linear;
}
.navigation__button span:nth-of-type(1){
  top: 10px;
}
.navigation__button span:nth-of-type(2){
  top: 15px;
}
.navigation__button span:nth-of-type(3){
  top: 20px;
}


/* 菜单展开/收起逻辑 */

#hamburger:checked ~ .navigation__links{
  left:0;
}

/* 汉堡按钮转叉样式 */
#hamburger:checked ~ .navigation__button span:nth-of-type(1){
  transform: rotate(45deg);
  top: 15px;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(2){
  opacity:0;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(3){
  transform: rotate(-45deg);
  top: 15px;
}

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