我一直在疯狂地试图弄清楚当我翻转它们时为什么我的导航按钮上会出现额外的填充。它只显示在它们的左侧和右侧。这是一个截图的链接：
http://i179.photobucket.com/albums/w319/jdauel/Screenshot2012-09-13at25417PM.png
我认为它与我的CSS有关，但我不知道了。请帮我？？？我尝试使用Firebug来解决问题。
以下是代码：
<!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>Farren's Photography</title>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
}
#container {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
color: #000;
background-color: #06F;
text-align: left;
padding: 0px;
height: 650px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-image: url(images/background_image.png);
background-repeat: no-repeat;
margin-top: 45px;
}
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color: #FFF;
}
#container #logo {
}
#container #logo #fp-logo {
background-image: url(images/logo.png);
height: 137px;
width: 408px;
text-indent: -9999px;
display: block;
}
#logo {
height: 137px;
width: 408px;
position: relative;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 35px;
}
#main {
background-color: #FFF;
min-height: 383px;
width: 707px;
position: relative;
left: 217px;
top: 16px;
right: 36px;
bottom: 113px;
}
#container #navbar {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
text-align: right;
height: 45px;
background-color: #CC0000;
position: relative;
top: 8px;
bottom: 0px;
left: 0px;
right: 0px;
}
#container #navbar ul li a {
text-decoration: none;
}
#container #navbar ul {
list-style-type: none;
padding-top: 16px;
}
#container #navbar ul li {
display: inline;
background-color: #280803;
margin: 0px;
height: 0px;
width: 0px;
position: relative;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 17px;
padding-left: 15px;
}
#container #navbar ul li a:link {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a:visited {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a:hover {
text-decoration: none;
color: #FFF;
background-color: #027e8e;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 17px;
padding-left: 15px;
margin: 0px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
height: 28px;
position: relative;
top: 8px;
color: #FFF;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<div id="logo"><a href="http://www.farrensphotography.com" title="Farren's Photography"
target="_self" id="fp-logo">Farren's Photography</a></div><!-- end logo -->
<div id="main">
<div id="content">
</div><!-- end content -->
</div><!-- end main -->
<div id="navbar">
<ul>
<li><a href="index.html" target="_self">Home</a></li>
<li><a href="portfolio.html" target="_self">Portfolio</a></li>
<li><a href="mystyle.html" target="_self">My Style</a></li>
<li><a href="specials.html" target="_self">Specials</a></li>
<li><a href="pricing.html" target="_self">Pricing</a></li>
<li><a href="contact.html" target="_self">Contact</a></li>
</ul>
</div>
<!-- end navbar -->
<div id="footer">
<div id="copyright">All images copyright© Farrens Photography
</div><!-- end copyright -->
<div id="network">Facebook button
</div><!-- end network -->
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>
答案 0 :(得分：0)
的 Demo 的 ............................
嗨，现在就像这样改变你的css
#container #navbar ul {
list-style-type: none;
margin:0;
padding:0;}
#container #navbar ul li {
display: inline-block;
vertical-align:top;
background-color: #280803;
margin:0;
padding:0;
position: relative;
}
#container #navbar ul li a:link {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a:visited {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a{
display:block;
line-height:45px;
padding-left:10px;
padding-right:10px;
}
#container #navbar ul li a:hover {
color: #FFF;
background-color: #027e8e;
}
的 Demo live 的