超链接列表项？

Question

我知道这可能看起来很简单，但我无法解决它，我试图让整个列表项可链接，而不只是单词home

html代码：

<a href="#page1"><li class="current">Home</li></a>

P.S。当你悬停li时，背景颜色会发生变化，所以我希望整个列表项都被超链接，如果你明白我的意思，不仅仅是单词

Answer 1

在内联元素（li）中包含块级元素（a）是无效的标记，可能会产生错误，具体取决于您的doctype。在这种情况下，首先将你的加价改为：

<li><a href="#">link text</a></li>

假设您的li为display: block，则以下内容会导致a'填充'可用空间：

a {
 display: block;
 width: 100%; /* this may, or may not, be necessary */
}

如果您将其用于水平列表，并且li为display: inline，则可以使用以下内容：

a {
  display: inline-block;
  }

风格到品味。

Answer 2

反向执行

<li class="current"><a href="#page1">Home</a></li>

不确定您的其他样式是什么，但您可以使用类似

的内容更改标记

li.current a{
  display:block;
}

Answer 3

这应该这样做：

HTML：

<li class="current"><a href="#page1">Home</a></li>

CSS：

li a {
    display: block;
}

// or

li.current a {
    display: block;
}