Navigation 如何在不中断display:inline的情况下将display:block添加到导航栏？

我正在努力让我的导航栏正常工作，一切看起来都很糟糕，但是我希望文本周围的整个块区域都可以点击，而不仅仅是文本本身

这一切看起来都不错，但当我将display:block添加到'a'元素时，内联中断，我得到了一个导航项目列表

希望有人能帮我，这似乎很容易，但我已经挣扎了几天

也就是说，这样做会破坏它：

nav li a{
    display: block;
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}

---

在锚固件中添加一些填充物，使锚固件更宽、更可点击

例如：

nav li a{
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 30px;
}

---

啊，好吧，那太容易了。我想我只是把所有的填充物都放在了li上，而不是链接上。以下是最新的提琴，以防其他人有同样的问题：