新手制作导航栏：<li>内<a>标签hover时底部存在间隙

你的问题出在这几个地方：

• 导航栏<nav>设置了固定高度，但<li>没有同步高度，导致<a>标签的height:100%没有正确的参照对象
• hover时把<a>的display从block改成flex，打乱了原有布局逻辑
• 上下padding和height的计算冲突，导致hover背景无法填满整个导航栏高度

修改后的CSS代码： #

nav {
  height: 50px;
  background-color: rgb(255, 255, 255);
  display: flex; /* 新增：让nav内部元素使用flex布局，justify-content才会生效 */
  justify-content: space-between;
  align-items: center; /* 替换align-self:center，用于垂直居中内部元素 */
}

nav li {
  float: right;
  margin: 0;
  height: 100%; /* 新增：让li和nav同高，作为a标签的高度参照 */
}

nav>ul {
  list-style-type: none;
  display: block;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

nav>ul>li>a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 0 15px; /* 调整：去掉上下padding，用高度和flex居中内容 */
  display: flex; /* 统一用flex布局，方便内容垂直水平居中 */
  align-items: center;
  justify-content: center;
  height: 100%; /* 新增：让a标签填满li的高度，也就是整个导航栏高度 */
  text-align: center;
}

li a:hover {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 178, 54);
  /* 去掉不必要的display:flex和无效的0秒过渡 */
}

关键修改点说明： #

1. 给<nav>添加display:flex，确保justify-content:space-between生效，同时让导航栏内部元素布局更稳定
2. 给<li>设置height:100%，使其高度和导航栏一致，为<a>标签提供正确的高度参照
3. 调整<a>标签的样式：用height:100%填满父元素高度，通过flex布局实现内容居中，去掉上下padding避免高度计算冲突
4. hover时仅修改颜色和背景色，不改动display属性，避免布局跳动

这样修改后，hover时背景色就能完全填满导航栏高度，不会出现底部间隙。

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