多行HTML锚点中不可点击区域

4

在多行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>

DEMO:

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


1
问题在于有些情况是合法的,不能被点击...例如如何处理这种情况http://jsfiddle.net/F52uY/5/? - Gabriele Petrioli
@GabyakaG.Petrioli 这不是问题,因为这将仅用于作为彩色按钮的锚点的特定 CSS 类。 - Ergec
3个回答

11
您可以将 a 元素设置为 display: inline-block; 或者 display: block,这样它就能被点击了。
例如:http://jsfiddle.net/RMXfc/ 或者您可以同时增加 padding 和设置负的 margin。这会减少间距。
例如:http://jsfiddle.net/693z4/

1
它不会在正常的句子流中工作。示例请参见http://jsfiddle.net/F52uY/8/。 - Gabriele Petrioli

2
如果你给锚点加上display: block;属性,就可以创建一个坚实的可点击区域。
a {
  line-height:1.5em;
  display: block;
}

JSFIDDLE

使用display: block;的一个问题是,如果没有指定宽度,则整个100%的宽度都是可点击的。


1

唯一的方法是在不影响文本布局的情况下(包括链接周围的文本),为这些链接添加一些上下内边距。

因此,将 padding:3px 0; 添加到您的代码中即可解决此问题。(但需要根据您的 font-sizeline-height 进行调整

演示请参见 http://jsfiddle.net/F52uY/7/


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接