使链接可点击区域等于父元素（<li>）的大小，即使父级具有填充

Question

大家好，我有一个菜单项，每个条目都有链接。

我想点击整个标记<li>来运行链接。

 <li style="padding: 10px 0 10px 15px;">
  <a href="#">Link</a>
 <li>

我在论坛上搜索过，我明白为了实现（部分）我想要的东西，我应该补充一下：

 a {
  display: block;
  width: 100%;
  height: 100%;
 }

但在我的<li>我有填充，因此链接的可点击区域不等于<li>的大小。我尝试删除<li>的填充并将其添加到<a>，但是可点击的区域来自标记li ....

我该如何解决这个问题？

感谢

修改

这是一个jsfiddle示例http://jsfiddle.net/zgqyLuq4/1/ 链接的可点击区域COMES OUT其父级（<li>）

Answer 1

您可以使a标记的填充不是li。 如果你有：

li {
    padding: 10px;
}

在a标记上进行此操作：

li > a {
    padding: 10px;
}