html - 将链接限制为适当的文本

Question

我正在尝试制作导航菜单和页脚。一切顺利，但它们都包含链接。而且我无法将“链接点击区域”限制为文本周围的一个小方 block 。我可以将光标指向菜单中某个名称旁边几像素，但仍会点击一个链接。您将如何解决这个问题，或者更确切地说:您将如何使用悬停功能将链接限制为适当的文本？

在 HTML 和 CSS 中执行此操作!

footer { 
  font-family: Moon Flower Bold; 
  font-size: 40px; 
  color: black; 
  background: rgba(0,138,99,0.4); 
  list-style-type: none; 
  Padding-bottom: 45px; 
} 

footer ul { 
  list-style-type: none;
  margin: 0; 
  padding: 0; 
} 

footer ul li { 
  display: inline-block; 
  float: left; 
  width: 200px; 
} 

footer a:visited, 
a:link { 
  color: black; 
  text-decoration: none; 
} 

footer a:hover { 
  background-color: grey; 
  text-decoration: none; 
}

<footer> 
  <ul>
    <li>&copy; Gruppe 3</li>
    <li><a href="kontaktos.html">Kontakt Os</a></li>
    <li><a href="links.html">Links</a></li>
  </ul>
</footer>

Answer 1

您可以通过为链接标记提供适当的填充(在您的情况下为 0)来管理可点击空间，例如。

HTML:

<a class='links' href='http//...'>link1</a>
<a class='links' href='http//...'>link2</a>

CSS:

.links{
    padding: 0;
}

这将导致仅链接文本可点击。