我想要一个通用的解决方案，它将始终将可点击链接区域限制为我的 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 和响应式解决方案。谢谢!
最佳答案
你应该把<a>标记里面 <h2> .默认情况下，标题有 display设置为 block ，这意味着如果未明确设置宽度，它们将自动占用所有可用的水平空间。该链接包含标题，因此浏览器假定整个区域都是一个链接。如果你插入 <a>进入<h2> , 然后它只换行文本而不换行整个标题。
<h2 class="page services"><a href="#p1">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></h2>
关于html - 防止链接扩展到整个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23963623/