时间戳

首页 > 解决方案 > 如何摆脱包装锚标签中的垂直悬停间隙？

css - 如何摆脱包装锚标签中的垂直悬停间隙？

问题描述

当我将鼠标悬停在锚标记上时，它会闪烁。这是因为包裹的锚标记的行之间存在垂直间隙。此外，如果我碰巧在两行之间单击，则链接不会激活。我想摆脱导致它的这种闪烁和垂直悬停间隙。布局的其余部分，包括明显的行高和按钮位置（与锚标记的最后一个单词在同一行）应该保持不变。

我考虑了几天，但没有运气。我最好的选择是在锚标记上使用 inline-block ，但这会将按钮清除到下一行，这会浪费太多空间。

body {
  line-height: 1.5;
  width: 300px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
  <a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </a>
  <button>click</button>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

标签： csstypography

解决方案

添加：

a {
   padding: 4px 0;
}

它会给a元素一个额外的空间topand bottom，它不会影响gaps.

body {
  line-height: 1.5;
  width: 300px;
}
a {
  text-decoration: none;
  padding: 4px 0;
}
a:hover {
  text-decoration: underline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
  <a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </a>
  <button>click</button>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

推荐阅读