所以我的问题是我有一个 910 像素宽的容器 div，里面的图像也是 910 像素，图像下方的导航栏似乎没有正确排列。我的导航栏由一个无序列表组成，其中每个链接背景在悬停时都会改变颜色，出于演示目的，我会不断突出显示它们，如下所示:http://i.imgur.com/hsQAXHs.jpg
我的问题是我希望我的导航栏直接排列在图像下方，因为它似乎稍微偏右。除了导航栏未居中外，每个链接的宽度也不够长，但如果我将它们设置得更长，它们将不适合 910 像素的容器，并且右侧的最后一个链接会被包裹在下面。
我不明白为什么我的链接没有居中，为什么它们不能正确适合我的 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>
谢谢! :)
最佳答案
#navbar ul {
padding: 0;
background-image: none;
padding-top: 17px;
padding-bottom: 10px;
}
在声明填充顶部和底部之前，尝试将填充归零，就像我在第 1 行中所做的那样。我认为您可能会看到一些特定于浏览器的样式应用于任何 ul 元素。
关于html - 导航栏未与容器内的图像对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21977200/