为什么我的链接在链接文本之外可以点击答案

【问题标题】：Why is my link clickable outside the linked text为什么我的链接在链接文本之外可以点击
【发布时间】：2021-09-02 00:29:56
【问题描述】：

https://i.imgur.com/T1hiXMO.png

这就是它现在的样子。单击黑色边框内的任意位置可链接到 URL。我只想链接文本“RANKINGS”。

HTML：

<div id="div1">
      <a href="https://example.com" target="_blank" rel='noopener noreferrer'><h4 id="title">RANKINGS</h4></a>
</div>

CSS：

#title {
    margin-top: -10px;
    font-size: 20px;
    color: #e846ff;
    text-align: center;
    font-family: 'Trebuchet MS';
    border: 1px solid black;
}

【问题讨论】：

标签： html css hyperlink

【解决方案1】：

由于 h4 是块级元素，它占据了窗口的整个宽度。使用 span 标签而不是 h4。 h4 在标签内也无效。如果你想保留它，你需要申请

#title{
display:inline;
}

【讨论】：

【解决方案2】：

您正在锚 (a) 元素内添加标题元素 (h4)。

尽管 Anchor 是内联元素，这意味着它们不会占据屏幕的整个宽度，但您在该 Anchor 中添加了一个 Heading 元素。

标题元素是块元素，它们确实占据了整个屏幕。

最好将 html 反转为codepen：

<h4 id="title">
    <a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>

这样你就得到你想要的。

【讨论】：

a 元素是透明的，不是内联的。
@quentin 在我看来，锚元素始终是内联的，即使 Safari、Chrome、Firefox、IE11 和 Edge 都是如此，但我似乎找不到任何规范。脑洞大开！因此，这似乎取决于每个浏览器的决定。虽然我假设大多数人都遵循这样的理念，即锚是一个文本流动元素而不是一个容器。

【解决方案3】：

因为，它可能是属性display 中具有值block 的元素。检查元素并在这种情况下检查它。块元素具有 100% 的宽度。如果需要，将 display: block; 更改为 display: inline;（在标题宽度 100% 设置为默认值）或自动宽度的其他值。另外，在这种情况下，您应该检查链接的display。

【讨论】：