Html 导航栏未与容器内的图像对齐_Html_Css_Nav

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

html css

Html 导航栏未与容器内的图像对齐,html,css,nav,Html,Css,Nav,所以我的问题是，我有一个910px宽的容器div，里面的图像也是910px，图像下面有一个导航条，似乎没有正确对齐。我的导航条是由一个无序列表组成的，当鼠标悬停在上面时，每个链接的背景都会改变颜色，出于演示目的，我会不断突出显示它们，如图所示：我的问题是，我想我的导航栏在图像的正下方对齐，因为它似乎稍微偏右。除了导航条没有居中外，每个链接的宽度不够长，尽管如果我再做它们，它们就不适合910px容器，右侧的最后一个链接被包裹在下面我不明白为什么我的链接没有居中，为什么它们不能正确地安装在我的9

所以我的问题是，我有一个910px宽的容器div，里面的图像也是910px，图像下面有一个导航条，似乎没有正确对齐。我的导航条是由一个无序列表组成的，当鼠标悬停在上面时，每个链接的背景都会改变颜色，出于演示目的，我会不断突出显示它们，如图所示：

我的问题是，我想我的导航栏在图像的正下方对齐，因为它似乎稍微偏右。除了导航条没有居中外，每个链接的宽度不够长，尽管如果我再做它们，它们就不适合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>


这一页需要一个标题
#纳瓦尔{
背景图像：无；
填充顶部：17px；
垫底：10px；
}
#纳瓦尔里酒店{
字体系列：Arial、Helvetica、无衬线字体；
显示：内联；
}
#navbar ul li a{
颜色：#FFF；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
文字装饰：无；
字体大小：粗体；
填充顶部：10px；
右边填充：23px；
垫底：10px；
左侧填充：23px；
背景色：#0085D7；
}
#导航栏ul li a：悬停{
背景色：#0085D7；
}
#容器{
宽度：910px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}
#背景{
背景图片：url（images/Navbar.jpg）；
背景重复：重复-x；
高度：47px；
背景位置：0px 0px；
z指数：-1；
位置：绝对位置；
宽度：100%；
边缘顶部：55px；
}

谢谢！：）

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

ul

元素。

你能发布一个链接或小提琴而不仅仅是一张图片吗？

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