如何在CSS中修复锚点和h1？

Question

我有一个带标记的HTML，

<a class="home-link" href="index.html" rel="home">
<h1 class="site-title">John Arellano's Personal Website</h1>
</a>

我在设计此网站标题时遇到问题。我的光标允许我点击进入 链接甚至是在空白区域。

任何人都可以帮我解决这个问题吗？因为我无法更改HTML文档。所以我希望用CSS Only修复它。

我仍然可以点击链接..如果宽度是200px;我仍然可以点击大于200px的位置;

Answer 1

您可以使用css执行此操作，如下所示：

<style>
     a:link{display:inline-block;}
</style>

Answer 2

块元素不能放在内联元素内，这是一个错误！它应该是这样的：

<h1 class="site-title"><a class="home-link" href="index.html" rel="home">John Arellano's Personal Website</a></h1>

Answer 3

你需要像这样更改html代码：

<h1><a href="" class="home-link">Site name</a></h1>

相反试试这个。可能你的css中有缩进。尝试使用：

a.home-link{
 text-indent:0;
 display:block;
 cursor:pointer;
 height:80px; /*adjust your height */
 width:80px; /*adjust your width */

}