如果在<nav>元素中，包含链接的<li>是否应该具有相同的填充量？</nav> </li>

Question

意图
在移动设备上更容易点击页脚中的链接。

背景
我有一个链接的页脚。链接非常接近，我想让它们更容易点击。当您在移动设备上看到页脚时，单击链接很困难。

我选择在margin-bottom添加填充，而不是添加<li>。但我也对<a>这样做，因为我想添加可点击区域。我选择padding而不是增加font-size。我尝试增加<a>元素中的填充但不确定是否会使其他链接相互重叠。  

<小时/> 我应该<li>和高度相同吗？或者我应该添加line-height代替？

这是我目前的CSS

.footer-widgets ul li {
  padding: 3px 0;
}

.footer-widgets ul li a {
  color: rgb(161, 161, 161);
  padding: 3px 12px 3px 0;
}

以下是显示可点击区域的页面的屏幕截图

Answer 1

将display: block添加到您的链接中，以便填充li元素。 li将以这种方式使用a标签扩展。您可能需要在ul或li上设置宽度，以防止链接穿过页面。

Answer 2

我会保持<li>和<a>相同的高度。我在许多页面上使用了我的移动设备，其设置与您自己的设置类似，包括我自己的网站。大多数运行Android 4.1+的设备都具有可选的点击缩放功能（当浏览器无法确定尝试选择的确切元素时，内容会被放大）。我个人不使用此功能，较小的元素可以很好地工作。