html - 位置 : relative; 的冲突问题

Question

我最近编辑了为 MyBB 设计模板的方式。幸运的是，我完全按照我的预期做了它，但是，导航栏似乎坏了。尝试导航后，发现只能点击导航的下半部分。 http://gyazo.com/99337bd5252b37e118ce119d5168bcf3 如您所见，我画红框的地方是链接激活起作用的唯一地方。大约 2 小时后，我发现我的问题是由于“position:relative；”。当我删除它时，导航工作正常，但我的面板 div 一直向右移动并偏离了位置。

<div class="main-bg">
<div class="main-width">

    <a name="top" id="top"></a>

    <div class="top-bar blue-texture"></div>

    <div id="header">


      <div id="panel">
 {$welcomeblock}
      </div>


      <div class="logo" >
         <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
</div>
      <hr class="hidden" />
     </div>
  </div>
  </div>
   <div id="container">
<div class="bg-img">
 </div>
    <hr class="hidden" />

    <div class="menu blue-texture">

            <span class="search">
    <form action="search.php" method="post">
        <input type="hidden" name="action" value="do_search" />
        <input type="hidden" name="postthread" value="1" />
        <input type="hidden" name="forums" value="all" />
        <input type="hidden" name="showresults" value="threads" />
        <input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" />
        <input type="submit" value="Go" class="search-button" title="Search the forums" />
    </form>
            </span>

     <ul>
      <li><a href="{$mybb->settings['bburl']}/index.php">Home</a></li>
      <li><a href="{$mybb->settings['bburl']}/page.php?page=tournaments">Tournaments</a></li>
     </ul>
    </div>

这里有关于我如何开发它的完整代码。但是，问题主要出在 CSS 上。

#header {
    padding: 60px 0 85px;
    height: 56px;
    text-align: left;
    position: relative;
}

#panel {
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 1px solid #07090b;
    border-radius: 6px;
    position: absolute; 
    top:0; 
    margin-top: 0px;
    right: 0;
    padding-top: 4px;
    font-size: 12px;
    padding-right: 12px;
    padding-left: 12px;
    height: 130px;
    }
.menu {
     border-radius: 6px;
     -webkit-border-radius: 6px;
     border: 1px solid #174d7b!important;
     height: 50px;
     }

但是我找不到解决问题的方法，因为无法添加 position:relative;并使导航链接仍然按预期工作。

Answer 1

如果没有实际链接或工作片段，将很难找到问题所在，但请尝试使用此 css 来解决您的问题:

.menu { width: 100%; }
.menu ul li a { display: inline-block; width: auto; float: left; }

希望对你有帮助