合理项目中的链接

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

并且整个区域都应该可以点击。

合理项目中的链接

Links in justified items

html

css

tablelayout