導航欄沒有與容器內的圖像排隊

所以我的問題是，我有一個910像素寬的容器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>

謝謝！ :)

來源

2014-02-24 user3335097

你可以發佈一個鏈接或小提琴，而不是一個圖像？ – thesublimeobject

http://jsfiddle.net/6y23Q/ –

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

嘗試清零填充，因爲我有第1行之前聲明您的填充頂部和底部。我想你可能會看到一些適用於任何ul元素的瀏覽器特定樣式。

來源

2014-02-24 01:33:41 arb

導航欄沒有與容器內的圖像排隊

回答

相關問題