我遇到了問題，我的水平導航欄

Question

我有一個頁眉和頁面的主體。主體寬1200px，有3列。左欄爲20％，中欄爲55％，右欄爲25％。頁面的標題是頁面寬度的100％，其位置是：absolute和top：0px;並留下0px;

我想讓導航欄與身體的中間列對齊，但我遇到了問題。導航欄的左邊緣應該直接位於中間主體列的左邊緣上方，右邊緣的邊緣也應該是相同的。無論是我的數學問題，還是我的設置都是錯誤的。

我希望我很清楚自己想要什麼。這裏是我的網站，因爲它是：http://darkonyx.webatu.com/

這裏是我的html代碼：

<div id="headerwrapper"> 
<div id="navbar"> 
    <ul id="nav"> 
     <li><a href="">Home</a></li> 
     <li><a href="/roster/roster.html">Roster</a></li> 
     <li><a href="/about/about.html">About</a></li> 
     <li><a href="/faq/faq.html">FAQs</a></li> 
     <li><a href="/contact/contact.html">Contact</a></li> 
    </ul> 
</div> 

與相關的CSS樣式：

#headerwrapper { 
position:absolute; 
top:0px; 
left:0px; 
z-index:999; 
width:100%; 
overflow:hidden; 
height:120px; 
background:url(img/headerBG.jpg); 
-moz-box-shadow: 0px 6px 20px #000; 
-webkit-box-shadow: 0px 6px 20px #000; 
box-shadow: 0px 6px 20px #000; 
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
/* For IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000'); 
#navbar{ 
position:absolute; 
top:85px; 
left:50%; 
width:1200; 
margin-left:-600;} 
#nav { 
width: 100%; 
float: left; 
padding: 0; 
list-style: none; 
background-color: #222;} 
#nav li { 
width:20%; 
float: left;} 
#nav li a { 
display: block; 
padding: 8px 15px; 
text-decoration: none; 
font-weight: bold; 
color: #666; 
border-right: 1px solid #777; 
border-top: 1px solid #777; 
border-left: 1px solid #777; } 
#nav li a:hover { 
color: #000; 
background-color: #555;} 

Answer 1

您需要添加下列選項到headerwrapper：

left:50%; 
margin-left:-600px; 

和改變寬度到1200像素

https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar.png

，如果你改變內div的寬度爲100％，它看起來就像是：

https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar2.png

Answer 2

如果你有一個位置：絕對在一個班級內，父母應該有一個位置：親戚，以便該孩子在定位時能夠很好地工作。

所以

1. Give your #headerwrapper** a position:relative 
2. Remove top: 100px from #bodycontainer 
3. Put #navbar into another div, giving this div a margin:0 auto (to be centered) and the same width as the middle body column 
4. Remove left % from #navbar and remove any position absolutes within it 

按照這一點，你會好到哪裏去！

編輯：繼承人的代碼

<div style=" 
width: 950px; 
margin: 0 auto; 
height: 115px; 
overflow: hidden;"> 

<div id="navbar"> 
<ul id="nav"> 
<li><a href="">Home</a></li> 
<li><a href="/roster/roster.html">Roster</a></li> 
<li><a href="/about/about.html">About</a></li> 
<li><a href="/faq/faq.html">FAQs</a></li> 
<li><a href="/contact/contact.html">Contact</a></li> 
</ul> 
</div> 
</div> 

這裏有一個快速的複製粘貼整個樣式表CSS（拿你的備份第一！）：http://pastebin.com/w5UC8ELF