Question

所以我的问题是我有一个910px宽的容器div，里面的图像也是910px，图像下方的导航栏似乎没有正确排列。我的导航栏是从无序列表中制作的，其中每个链接背景在悬停时会改变颜色，为了演示目的，不断突出显示它们，如下所示：http://i.imgur.com/hsQAXHs.jpg

我的问题是我希望我的导航栏直接排列在图像下方，而它似乎略微偏向右侧。除了导航栏没有居中，每个链接的宽度还不够长，但是如果我再制作它们，它们不适合910px容器，右边的最后一个链接被包裹在下面。

我不明白为什么我的链接没有居中，以及为什么它们在我的910px容器中不正确。

这是我的代码：

<!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>This Page needs a Title</title>
<style type="text/css">
#navbar ul {
background-image: none;
padding-top: 17px;
padding-bottom: 10px;
}
#navbar ul li {
font-family: Arial, Helvetica, sans-serif;
display: inline;
}
#navbar ul li a {
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
padding-top: 10px;
padding-right: 23px;
padding-bottom: 10px;
padding-left: 23px;
background-color: #0085D7;
}
#navbar ul li a:hover {
background-color: #0085D7;
}
#container {
width: 910px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#bg {
background-image: url(images/Navbar.jpg);
background-repeat: repeat-x;
height: 47px;
background-position: 0px 0px;
z-index: -1;
position: absolute;
width: 100%;
margin-top: 55px;
}
</style> 
</head>

<body>
<div id="bg"></div>

<div id="container">
<img src="images/block.jpg" width="910" height="39" />
<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> 
</div>

</body> 
</html>

谢谢！：）

Answer 1

#navbar ul {
  padding: 0;
  background-image: none;
  padding-top: 17px;
  padding-bottom: 10px;
}

在声明填充顶部和底部之前，尝试将第1行的填充清零。我想你可能会看到一些适用于任何ul元素的浏览器特定样式。

导航栏没有与容器内的图像对齐

1 个答案: