Question

我有一些合理的清单项目。我想在单击这些列表元素时转到列表项内的相应链接。

我的HTML：

<ul>
  <li class="btn"><a href="#">2</a></li>
  <li class="btn"><a href="#">3</a></li>
  <li class="btn"><a href="#">4</a></li>
  <li class="btn"><a href="#">5</a></li>
  <li class="btn"><a href="#">6</a></li>
</ul>

我的css：

ul {
  list-style:none;
  width: 400px;
  background:#aaa;
  border-collapse: separate;
  table-layout: fixed;
}
li {
  display: table-cell;
  float: none;
  width: 1%;
  padding:5px;
}
li > a {
  text-decoration: none;
  padding: 0 15px;
}
li:hover {
  background:#eee;
}
li > a:hover {
  color:#3cfc2c;
  font-size: 20px;
}

正如您所看到的，我可以通过直接点击链接进入链接，但我想在点击列表项时转到这些链接。

我可以通过提供一些填充来实现，但是列表项的数量是未知的，因此每个列表项的宽度也是未知的。所以我不能给出一些固定的填充。

如何设置锚标记占据其父列表元素中的所有空格？

Answer 1

更改此选择器：

li > a {
  text-decoration: none;
  padding: 0 15px;
}

到

li > a {
  text-decoration: none;
  padding: 0 15px;
  display: block;
}

整个区域应该是可点击的。

合理项目中的链接

1 个答案: