Question

我最近编辑了为MyBB设计模板的方式。幸运的是，我完全按照预期的方式制作了它，然而，导航栏似乎破了。尝试导航后，我意识到我只能点击导航的下半部分。 http://gyazo.com/99337bd5252b37e118ce119d5168bcf3 正如您所看到的那样，红色框是链接激活工作的唯一位置。大约2个小时后，我发现我的问题是由于＆＃34;位置：相对;＆＃34;。当我删除它时，导航工作正常，但我的面板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;
     }

但我无法找到解决问题的方法，因为无法添加位置：相对;并使导航链接仍然按预期工作。

Answer 1

如果没有实际链接或工作代码段，很难找到问题，但请尝试使用可以解决问题的CSS：

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

希望这有帮助

与职位冲突的问题：相对;

1 个答案: