CSS li元素hover效果不完整的原因分析及解决方案

问题成因 #

目前hover效果无法覆盖ul容器整个垂直高度，核心原因有两点：

1. li设置了固定height:20px，并且用margin:10px控制上下间距——margin不属于元素的盒模型范围，所以hover时只有20px高的区域会变色，上下margin的区域不在li的触发范围内。
2. 浏览器默认给ul添加了上下内边距（padding），这部分空间也不属于li的范围，进一步导致hover区域和ul容器高度不匹配。

修复方案（不使用Flexbox） #

通过调整盒模型和布局方式，让li的范围完全覆盖ul的垂直高度：

修改后代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      background-color: tomato;
      padding: 0; /* 清除ul默认上下内边距 */
      margin: 0; /* 清除ul默认外边距 */
      overflow: hidden; /* 清除浮动，确保ul能包裹子元素 */
    }
    
    li {
      float: left; /* 实现横向排列 */
      width: 50px;
      padding: 10px 0; /* 用上下内边距替代原margin，撑满ul垂直高度 */
      text-align: center; /* 让导航文字居中 */
    }
    
    a {
      color: white;
      display: block; /* 让链接占满li的全部空间，提升点击体验 */
    }
    
    li:hover {
      cursor: pointer;
      background-color: teal;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#news">About</a></li>
  </ul>
</body>
</html>

关键修改说明 #

• 清除ul默认样式：去掉ul的默认padding和margin，避免额外空间干扰布局。
• 用float实现横向排列：替代inline-block，让li可以通过padding完全填充ul的垂直空间。
• 用padding替代margin：把原来li的上下margin换成padding，这样li的垂直范围从ul顶部延伸到底部，hover时整个区域都会触发变色。
• 清除浮动：给ul加overflow:hidden，解决float导致的父元素高度塌陷问题，确保ul高度和子元素匹配。

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