Как исправить якорь и h1 в css?

Question

У меня есть HTML с разметкой,

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

У меня есть проблема в Стилизация этого сайта-заголовок. Мой курсор позволяет мне нажать на ссылку , даже если она находится в пустом пространстве.

Может ли кто-нибудь помочь мне исправить это с помощью CSS? Потому что я не могу изменить HTML-документ. Поэтому я надеюсь исправить это только с помощью CSS.

Я все еще могу щелкнуть ссылку .. Если ширина 200px; я все еще могу щелкнуть в позиции больше 200 пикселей;

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 */ 

}