Nav bar not lining up with image inside container

StackOverflow https://stackoverflow.com/questions/21977200

  •  15-10-2022
  •  | 
  •  

문제

So my problem is that I have a container div that is 910px wide, with an image inside that is also 910px, along with a Nav bar underneath the image that doesn't seem to line up properly. My nav bar is made from an Unordered list where each link background changes colour when hovered over, for demonstration purposes ill have them constantly highlighted as seen here: http://i.imgur.com/hsQAXHs.jpg

My problem is that I want my nav bar to line up directly underneath the image, where as it seems to be slightly off to the right. As well as the nav bar not being centred, the width of each link isnt long enough, though if I make them any longer they don't fit in the 910px container and the last link on the right gets wrapped underneath.

I don't understand why my links aren't centred and why they are not fitting correctly in my 910px container.

Here is my code:

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

Thank you! :)

도움이 되었습니까?

해결책 

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

Try zeroing out the padding as I have on line 1 before declaring your padding top and bottom. I think you might be seeing some browser specific styling that is applied to any ul element.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top