CSS问题：列表项（li）丢失line-height，寻求技术帮助

嘿，我看了你遇到的问题——和链接同处一行的tooltip导致下一个<li>的line-height异常，对吧？我去看了你的页面，右侧侧边栏里的情况确实很明显，下一个列表项的文字紧紧贴在上一个下面，看起来像是行高完全失效了。

结合常见的布局问题，给你梳理几个排查和解决的方向：

1. 检查Tooltip的定位设置 #

大概率是tooltip的定位没有处理好，影响了父元素<li>的布局计算：

• 如果你给tooltip用了position:absolute，一定要给包含它的<li>设置position:relative，这样tooltip的定位会相对于当前li，不会跑到外部干扰其他元素的文档流。
• 确认tooltip的元素是否正确脱离了文档流：absolute定位的元素默认不占空间，但如果你的tooltip有未处理的margin/padding，或者没有设置width导致文本换行，可能会意外挤压父元素的高度。

2. 清除浮动（如果用到了的话） #

如果你的tooltip或者链接用了float:left/right来实现同行排列，一定要给<li>添加浮动清除，否则下一个li会“钻”到上一个的下面，看起来像是行高丢失：
可以用伪元素清除法，给侧边栏的li加这个CSS：

.sidebar li::after {
  content: "";
  display: table;
  clear: both;
}

3. 修正垂直对齐方式 #

如果tooltip是用inline-block和链接同行排列的，记得设置vertical-align属性，避免它破坏li的行高计算：

.tooltip {
  display: inline-block;
  vertical-align: middle; /* 或者和链接的对齐方式匹配 */
  /* 其他tooltip样式 */
}

4. 给li设置明确的行高兜底 #

有时候父元素的行高会因为内部元素的异常布局被覆盖，可以直接给侧边栏的所有li设置明确的line-height值，比如：

.sidebar li {
  line-height: 1.6; /* 或者你需要的像素值，比如24px */
  margin-bottom: 8px; /* 如果需要额外间距的话 */
}

你可以按照这个顺序一步步排查，先从定位和浮动清除入手，这两个是最常见的触发这类问题的原因。

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