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

Question

StackOverflow社区！

我的网站存在问题，我将鼠标悬停在导航栏上的某个项目上，并且该项目未涵盖我打算涵盖的所有内容。对于那些敏锐地注意到Here和Here也回答了这个问题的主持人，由于我是一个span标签，另一个是垂直下拉列表，而不是水平导航栏。下面的附件是问题的屏幕截图。

_{我想要的效果是将背景移到顶部和底部的边缘，然后将背景移到右侧和左侧的边缘}

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

使用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>