WordPress移动端导航li元素height:auto高度异常问题咨询

无需显式设置固定高度，可从以下方向排查解决：

• 检查并重置行高：主题CSS可能给<li>或内部文本元素设置了过大的line-height，比如line-height: 80px，会直接拉满元素高度。可尝试重置：

  .mobile-nav li {
    line-height: normal;
    /* 也可根据文本大小设置相对值，比如 line-height: 1.2; */
  }
  

• 清除强制最小高度：部分主题会给导航项设置min-height来统一高度，若存在min-height: 80px这类规则，直接重置：

  .mobile-nav li {
    min-height: unset;
  }
  

• 排查伪元素干扰：有些主题会用::before/::after伪元素添加装饰，若伪元素设置了占位高度，会撑高<li>。可临时禁用伪元素验证：

  .mobile-nav li::before,
  .mobile-nav li::after {
    display: none;
  }
  

• 调整Flex/Grid布局对齐：如果导航容器采用Flex或Grid布局，align-items: stretch会让子元素<li>拉伸至容器高度。可修改对齐方式：

  .mobile-nav ul {
    align-items: flex-start; /* 或 center，按需调整 */
  }
  

• 用浏览器工具定位样式来源：在浏览器开发者工具的「Elements」面板中，查看<li>的Computed样式，找到Height属性的继承来源或高优先级覆盖规则，直接针对性修改。

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