Question

是否可以防止多行html锚标记中行之间的不可点击区域？在这个例子中，我使用行高1.5，你不能在行之间点击。

我知道在html5中我们可以将块级标签放在锚点<a><div>Link</div></a>中，但问题是这部分内容可以由用户编辑，我不能要求他们像这样写他们的锚链接。是否可以仅使用css解决此问题？

CSS：

a {
    line-height:1.5em;
}

HTML：

<a href="#">This is a <br> multiline anchor</a>
<br><br><br>
<a href="#">This is a very long anchor displayed as a multiline anchor without BR</a>

样本：

http://jsfiddle.net/ergec/F52uY/2/

Answer 1

您可以将display: inline-block;或display: block设置为a，然后点击即可。

或者您可以同时增加padding并设置为否定margin。这将减少差距。

Answer 2

如果你给锚标签display: block;，你将有一个可靠的可点击区域。

a {
  line-height:1.5em;
  display: block;
}

display: block;的一个问题是没有指定的宽度，那么整个100％的宽度都是可点击的。

Answer 3

在不弄乱文本布局的其他部分（包括链接的周围文本）的情况下逼近它的唯一方法是向这些链接添加一些顶部/底部填充.. < / p>

因此，在代码中添加padding:3px 0;可以解决问题。（但需要根据您的font-size和line-height 进行调整）

演示