Question

只是一个简单的简单html / css问题，我确定有人能够轻松回答。我是一个编码新手，因此我要问：）

所以我正在制作一个导航栏，它由包含在div标签中的无序列表组成，翻转后可以更改每个链接的背景颜色。（我希望我的编码术语有意义）继承我的代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thomson Automotive Ebay Store</title>

<style type="text/css">
#navbar ul {
background-color: #000;
text-align: center;
padding:10px;
}
#navbar ul li {
display: inline;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
}
#navbar ul li a {
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
}
#navbar ul li a:hover {
background-color: #0085D7;
}
</style> 
</head> 
<body>

<div id="navbar">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">ADD TO FAVORITES</a></li>
    <li><a href="#">DELIVERY & RETURNS</a></li>
    <li><a href="#">FEEDBACK</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div> 

</body> 
</html>

所以我唯一的问题是在Firefox中预览时，当我滚动链接时，背景颜色变化似乎没有正确地填满我的导航栏，底部留下1-2像素间隙，如下所示：{{ 3}}

轻微，我知道，但只是想知道我的编码是否存在问题，或者只是浏览器问题。

谢谢：）

Answer 1

从#navbar ul删除填充。

添加这些属性#navbar ul li a：

{line-height: 40px; display: inline-block; padding: 0px 10px;}

线高将决定导航的高度，并垂直居中你的文字！ Inline-Block给出了高度，因此您不需要任何填充顶部或底部，只需要两侧。

简单的导航栏滚过间隙

1 个答案: