列表项中的链接标记？

Question

我的问题是：我在<a>中有一个<li>标记，该列表的css样式看起来像一个按钮，但使用如下：

<a href="#"><li>page</li></a>

这是不正确的。我该怎么办？ 有没有办法，如果我点击<li>中的每个地方都会触发链接？

Answer 1

假设您有一个ol或ul作为父级，cannot标记为a个标记作为直接子级。尝试翻转两个，然后使用CSS来获取您需要的宽度：

<li><a href="#">page</a></li>

Answer 2

您说<a>中有<li>，但在您的代码段中却是另一种方式。使用<a>标记的无效或语义html是列表项li的父级。

但无论如何，您需要<a>为display:block

Answer 3

<a>个元素默认定位inline。您应该将display属性更改为block以占用其父级的整个空间。

ul {
  list-style-type: none;
}
li {
  background: blue;
  width: 100px;
}
li a {
  background: orange;
  display: block;
}

<ul>
  <li><a href="#">page</a>
  </li>
</ul>