我的水平导航栏有问题

Question

我有一个标题，以及我的页面正文。正文宽度为 1200px，共 3 列。左列为 20%，中间列为 55%，右列为 25%。页面的标题是页面宽度的 100%，位置：绝对和顶部：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

您需要将以下选项添加到标头包装器：

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

如果你有一个位置：绝对在一个类中，它的父级应该有一个位置：相对，以便该子div 在定位方面工作良好。

所以

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 先备份您的