我的水平导航栏出现问题
我有一个标题和我的页面的正文。 主体宽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;}
您需要将以下选项添加到headerwrapper中：
left:50%;
margin-left:-600px;
并将宽度更改为1200px
https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar.png
如果将内部div的宽度更改为100％，它将如下所示：
https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar2.png
如果你有一个位置：在班级中是绝对的，那么父母应该有一个位置：亲戚，以便该子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
链接地址: http://www.djcxy.com/p/39085.html