简单的导航栏翻滚空白

只是一个简单的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预览的时候，当我翻身我的链接，背景颜色的变化似乎并不填满我的导航栏如下所示：http://i.imgur.com/OvpXdiQ.jpg

轻微的，我知道，但只是想知道我的编码是否有问题，或者它只是一个浏览器问题。

谢谢:)

来源

2014-02-21 user3335097

看起来不错在我的Firefox（v26）：http://jsfiddle.net/N7khC/ –

从#navbar ul取出填充。

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

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

LINE-HEIGHT将决定你的资产净值的高度，垂直居中的文本以及！内联块给出高度，所以你不需要任何填充顶部或底部，只是两侧。

来源

2014-02-21 01:28:46 slynagh

简单的导航栏翻滚空白

回答

相关问题