导航元素的背景未填充整个空间

Question

StackOverflow 社区！

我的网站有问题，我将鼠标悬停在导航栏上的某个项目上，但它没有覆盖我打算覆盖的全部位置。对于那些敏锐地注意到这个问题也得到了回答Here 和Here 的版主，它不适用于我的情况，因为一个是跨度标签，另一个是垂直下拉菜单，而不是水平导航栏。下面附上问题的截图。

_{我打算的效果是让背景右到上下边缘，将背景推到左右边缘}

我试过在网上玩，但最一致的答案是：

使用display: block

如果我要实现它会打乱导航栏的流程。有人能指出我正确的方向吗？

用于设置导航栏及其元素样式的 CSS：

nav {
    text-align: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
    padding: 10px;
}

nav li {
    display: inline-block;
    transition: background-color 0.3s ease-in-out 0s;
}

nav li:hover {
    background-color: lightgrey;
}

nav a {
    text-decoration: none;
    color: white;
}

注意：问题在于我向 ul 元素添加了一些填充，我明白这一点。我只是不确定如何在不拧导航栏的情况下绕过它

Answer 1

只需将填充放在li 上即可。

nav {
    text-align: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
}

nav li {
    display: inline-block;
    transition: background-color 0.3s ease-in-out 0s;
    padding: 10px;
}

nav li:hover {
    background-color: lightgrey;
}

nav a {
    text-decoration: none;
    color: white;
}

<nav>
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</nav>