2

我有一个标题和我的页面的正文。正文宽度为 1200 像素，有 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;}
4

2 回答 2

0

如果您在一个类中有一个 position: absolute ，它的父级应该有一个 position: 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

于 2012-11-22T07:38:15.237 回答
0

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

于 2012-11-22T08:19:36.113 回答