Question

修复我的导航菜单，因为我遇到谷歌浏览器用户无法点击我网站上的导航栏链接的问题。新的解决方案修复了它，但我现在有一个导航栏，它从一个页面上的布局偏移而不是另一个页面。

访问http://www.survivaloperations.net获取主网站视图（排成行）和http://www.survivaloperations.net/forums/访问论坛视图（偏移左侧）。

导航的HTML是：

<ul id="nav">
        <li><a id="home" href="./news" alt="Home"></a>
        <li><a id="members" href="./members"></a>
        <li><a id="forums" href="./forums/" alt="Forums"></a>
        <li><a id="about" href="./about"></a>
        <li><a id="guides" href="http://www.survivaloperations.net/forums/viewforum.php?f=10"></a>
        <li><a id="drawings" href="http://www.survivaloperations.net/forums/viewforum.php?f=6"></a>
        <li><a id="faq" href="./faq"></a>
        <li><a id="downloads" href="./downloads"></a>
        <li><a id="sponsors" href="./sponsors"></a>
        <li><a id="nav_break" href=''></a>
        <li><a id="apply" href="./forums/application.php"></a>
    </ul>

导航的CSS是：

 #nav {   margin:297px 0 0 -40px;   position:absolute; }

 #nav a {   display:block;
     height:35px; }

 #nav li  {   display:inline-block; }

 #home {
     background: url('http://survivaloperations.net/images/home.jpg') no-repeat bottom;   width:106px; }
 #home:hover {
     background: url('http://survivaloperations.net/images/home_up.jpg') no-repeat
 bottom; }

 #members {
     background: url('http://survivaloperations.net/images/members.jpg') no-repeat
 bottom;   width:96px; }
 #members:hover {
     background: url('http://survivaloperations.net/images/members_up.jpg') no-repeat
 bottom; }

 #forums {
     background: url('http://survivaloperations.net/images/forums.jpg') no-repeat bottom;   width:96px; }
 #forums:hover {
     background: url('http://survivaloperations.net/images/forums_up.jpg') no-repeat
 bottom; }

 #about {
     background: url('http://survivaloperations.net/images/about.jpg') no-repeat bottom;   width:96px; }
 #about:hover {
     background: url('http://survivaloperations.net/images/about_up.jpg') no-repeat
 bottom; }

 #guides {
     background: url('http://survivaloperations.net/images/guides.jpg') no-repeat bottom;   width:96px; }
 #guides:hover {
     background: url('http://survivaloperations.net/images/guides_up.jpg') no-repeat
 bottom; }

 #drawings {
     background: url('http://survivaloperations.net/images/drawings.jpg') no-repeat
 bottom;   width:96px; }
 #drawings:hover {
     background: url('http://survivaloperations.net/images/drawings_up.jpg') no-repeat
 bottom; }

 #faq {
     background: url('http://survivaloperations.net/images/faq.jpg') no-repeat bottom;   width:96px; }
 #faq:hover {
     background: url('http://survivaloperations.net/images/faq_up.jpg') no-repeat bottom; }

 #downloads {
     background: url('http://survivaloperations.net/images/downloads.jpg') no-repeat
 bottom;   width:96px; }
 #downloads:hover {
     background: url('http://survivaloperations.net/images/downloads_up.jpg') no-repeat
 bottom; }

 #sponsors {
     background: url('http://survivaloperations.net/images/sponsors.jpg') no-repeat
 bottom;   width:100px; }
 #sponsors:hover {
     background: url('http://survivaloperations.net/images/sponsors_up.jpg') no-repeat
 bottom; }

 #nav_break {   background:url('http://www.survivaloperations.net/images/nav_spacer.jpg');
     width:254px; }

 #apply {
     background: url('http://survivaloperations.net/images/apply.jpg') no-repeat bottom;   width:108px; }
 #apply:hover {
     background: url('http://survivaloperations.net/images/apply_up.jpg') no-repeat
 bottom; }

我在论坛中没有看到任何内容，也没有正常的网站样式表。如果我将-40px更改为0，它会使正常的网站混乱并修复论坛。

任何想法都会很棒！

注意：可以在http://www.survivaloperations.net/style.css

找到整个CSS

Answer 1

首先，在调整页面大小时，导航会中断。

#nav {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

修改

我注意到你也有填充问题。所以我也会将padding: 0;添加到该CSS中。

导航栏偏移？

1 个答案: