如何使垂直导航栏中的选项卡居中？

Question

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

HTML:

     <!DOCTYPE html>
     <html>
       <head>
         <title>Matthew H. Goodman</title>
         <link href="style2home.css" rel="stylesheet" type="text/css"/>
       </head>
       <body>
         <ul id="nav">
           <li><a href="#">HOME</a></li>
           <li><a href="#">CV</a></li>
           <li><a href="#">RESEARCH</a></li>
           <li><a href="#">CONTACT</a></li>
         </ul>
       </body>
     </html>

CSS:

     #nav {
       margin-top: 200px;
       left: 0;
       width: auto;
       height: auto;
       border-radius: 10px;
       position: absolute;
       background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
     }

     #nav li {
       position: relative;
       list-style: none;
       padding: 15px;
       width: auto;
     }

     #nav li a {
       position: relative;
       display: block;
       text-decoration: none;
       font-size: 15px;
       font-weight: bold;
       color: white;
       text-align: center;
     }

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

     }

Answer 1

您的 #nav 元素应用了一些填充，您可以通过添加来修复它：

 #nav {padding:0px;}

要使背景覆盖整行，请在 a 中添加更多填充，并使用当前标记从 li 中删除填充。

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

您可以向 li 元素添加一个 hover 状态，但这会导致无法正确单击 a 元素的一些问题。

Answer 2

浏览器和一些 CSS 重置将默认规则添加到 UL/OL 等元素，以保持无样式 html 元素看起来一致。

ul#nav { padding-left: 0; }

我建议使用 CSS 重置（正常化、eric meyer 的重置等）让您从头开始。使用 chrome/firefox/ie11 开发工具（F12，或右键单击并检查元素），转到 window 中的元素并将鼠标悬停在它上面以查看 margin/padding 规则。向下滚动右侧的 CSS 规则以查找应用它们的位置或单击 'computed styles' 查看所有规则。

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

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

您还需要添加

#nav { overflow: hidden; }

保持你的边界半径

如何使垂直导航栏中的选项卡居中？

How do I center tabs in a vertical navigation bar?

html

css

navbar