导航栏hover时链接下方异常padding问题修复求助（保留padding）

问题根源 #

1. HTML标签未闭合：所有<a>标签均未添加闭合标签</a>，浏览器自动解析时生成错误DOM结构，导致hover状态下出现异常间距。
2. 默认纵向布局不符预期：<li>默认是块级元素，每个导航项占满一行，和你参考视频中的横向导航布局不一致，这也会让你误判为padding异常。

修复代码（保留原有padding） #

修正后的HTML代码

<header>
  <nav class="navbar">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</header>

调整后的CSS代码

h1 {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #131842;
  /* 添加flex实现横向导航布局 */
  display: flex;
}

.navbar a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px; /* 保留原有padding设置 */
}

.navbar a:hover {
  background-color: #405D72;
}

补充说明 #

• 标签闭合是HTML基础语法规范，未闭合会引发浏览器不可控的渲染异常，需养成闭合标签的习惯。
• 使用display: flex让<ul>内的<li>横向排列，实现和参考视频一致的导航布局，同时保留了你设置的padding，hover时背景色会完整覆盖点击区域，不会出现异常间距。

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