Html 如何在垂直导航栏中居中放置选项卡？

所以我有一个垂直导航栏，我无法将标签居中。文本离右侧太远，当我将鼠标悬停在文本上方时，突出显示的框不会延伸到页边距。我的代码如下：

HTML:

---

您的

#nav

元素应用了一些填充，您可以通过添加以下内容来修复它：

 #nav {padding:0px;}

要使背景覆盖整行，请在

a

中添加更多的填充，并使用当前标记删除

li

中的填充，这将起到作用

li {padding:0px;}
a {padding:15px;}

---

您可以向li元素添加一个

悬停状态，但这会导致无法正确单击a元素的一些问题。
浏览器，以及一些CSS重置向元素（如UL/OL）添加默认规则，以保持无样式html元素的一致性

ul#nav { padding-left: 0; }

我建议使用CSS重置（normalize、ericmeyer的重置等），让您从头开始。
使用chrome/firefox/ie11开发工具（F12，或右键单击并检查元素），转到窗口中的元素并将鼠标悬停在其上以查看边距/填充规则。向下滚动右侧的CSS规则以查找它们的应用位置，或单击“计算样式”以查看所有规则

对于悬停状态，
您需要将鼠标悬停应用于li并单独处理颜色

#nav li:hover { background-color: black; }
#nav li:hover a  { color: #778899; }

您还需要添加

#nav { overflow: hidden; }

要保持您的边界半径
谢谢！这解决了居中问题，但是我如何让黑色突出显示填充div的宽度呢？您在
li
元素中添加了填充，并在锚链上添加了悬停状态，因此它不会只填充a。从
li
中删除填充，并在
a
中添加更多填充。此外，这将使链接不太“可点击”，将您的li填充移动到a标记，并显示块100%100%
#nav li a{显示：块；宽度：100%；高度：100%；填充：15px；}
确定！如果一切顺利，请
接受
我的答案！：）
#nav li:hover { background-color: black; }
#nav li:hover a  { color: #778899; }

#nav { overflow: hidden; }