Question

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

在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;
}

这样可以使链接文本可以点击。

限制指向适当文本的链接

1 个答案: