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

Question

https://i.stack.imgur.com/RZPaw.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;
}

Answer 1

您正在锚点(a(元素中添加Heading元素(h4(。

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

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

这将是更好的反向html在这个代码笔：

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

这样你就能得到你想要的。

Answer 2

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

#title{
display:inline;
}

Answer 3

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

Answer 4

解决此问题的另一种方法是为您的a元素提供width:fit内容；所有物这将使链接拥抱文本，而不是延伸到文本之外：

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

(CSS：(

h4 a{
width: fit-content;
}