导航栏未与容器内的图像对齐答案

【问题标题】：Nav bar not lining up with image inside container导航栏未与容器内的图像对齐
【发布时间】：2014-03-25 11:48:48
【问题描述】：

所以我的问题是我有一个 910 像素宽的容器 div，其中的图像也是 910 像素，以及图像下方的导航栏似乎没有正确排列。我的导航栏是由一个无序列表组成的，其中每个链接背景在悬停时都会改变颜色，出于演示目的，我会让它们不断突出显示，如下所示：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>

谢谢！ :)

【问题讨论】：

你能发布一个链接或小提琴而不是一张图片吗？
jsfiddle.net/6y23Q

标签： html css nav

【解决方案1】：

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

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

【讨论】：