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

如果你有一个位置：一个类中的绝对位置，那么它的父级应该有一个位置：relative，以使该子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

Answer 2

您需要将以下选项添加到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

我的水平导航栏出现问题

2 个答案: