html - 防止链接扩展到整个页面

Question

我想要一个通用的解决方案，它将始终将可点击链接区域限制为我的 h2 文本的文本。请注意，问题是当您将鼠标悬停在或单击文本右侧的空间时，您仍然位于可单击区域。

这是一个例子:

标记:

 <a  href="#p1">
     <h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
 </a>

CSS:

h2.services {
    font-size: 16px;
}

这是一个演示: http://jsfiddle.net/j7n3k/

ps - 请勿使用 js 或 jquery。只有在可能的情况下才使用 CSS 和响应式解决方案。谢谢!

Answer 1

你应该把<a>标记里面 <h2> .默认情况下，标题有 display设置为 block ，这意味着如果未明确设置宽度，它们将自动占用所有可用的水平空间。该链接包含标题，因此浏览器假定整个区域都是一个链接。如果你插入 <a>进入<h2> , 然后它只换行文本而不换行整个标题。

<h2 class="page services"><a href="#p1">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></h2>