1

我一直在疯狂地试图弄清楚为什么当我翻转它们时我的导航按钮上会出现额外的填充。不过，它只显示在它们的左侧和右侧。这是它的截图的链接：

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>
4

1 回答 1

0

演示 ......................

嗨，现在只需像这样更改您的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;
}

现场演示

于 2012-09-14T05:10:44.427 回答