css - 导航元素的背景未填满整个空间

Question

StackOverflow 社区!

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

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

我试过玩玩和上网查找，但最一致的答案是:

Use 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>