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状态，但这会导致一些问题，因为能够正确点击一个元素。

Answer 2

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

ul#nav { padding-left: 0; }

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

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

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

您还需要添加

#nav { overflow: hidden; }

保持边界半径

如何将标签置于垂直导航栏中？

2 个答案: