只是一个快速简单的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>
所以我唯一的问题是,当我在火狐浏览器中预览它时,当我滚动我的链接时,背景颜色的变化似乎没有正确地填满我的导航栏,在底部留下了一个1-2像素的间隙,如下所示:http://i.imgur.com/OvpXdiQ.jpg
小,我知道,但只是想知道是我的代码有问题,还是只是浏览器的问题。
谢谢:)
发布于 2014-02-21 09:28:47
从#navbar ul
中删除填充。
添加这些属性#navbar ul li a
{line-height: 40px; display: inline-block; padding: 0px 10px;}
行高将决定您的导航高度,并垂直居中您的文本也!Inline-Block给出了高度,所以你不需要任何填充顶部或底部,只需要边。
https://stackoverflow.com/questions/21922815
复制相似问题