Question

我已经让我的导航栏像我想要的那样工作，大多数情况下，但现在，我又遇到了问题，当我最小化窗口时，导航栏及其所有链接都会崩溃，而且它几乎看起来相当不错，但它覆盖了我的内容区域，一些链接文本在导航栏区域上运行，我必须隐藏它等等。所以我认为最简单的方法是让导航栏完全不移动，只需可以滚动整个页面。

not a busy cat](![not a busy cat

这是我的CSS：

    #navBar{
 width: 100%;
 float: left;
 position: fixed;
 top: 0;
 background-color: #000000;
 left: 0;
}

#navBar ul{
 margin: 0 auto;
 height: 65px;
 list-style:none;
 min-width:760px;
}

#navBar li{
 float: left;
 height: 65px;
}

#navBar li a:link , a:visited{
 font-size: 90%;
 display: block;
 color: #ffffff;
 padding: 20px 25px;
 font: 18px "open sans", sans-serif;
 font-weight: bold;
 text-decoration: none;
}

#navBar li a:hover{
 background-color: #ffffff;
 color: #000000;
 text-decoration: none;

这是我的HTML：

<body>
 <nav>
   <div id="navBar">
    <ul> 
     <li><a href="esileht.html">ESILEHT</a></li>
     <li><a href="uudised.html">UUDISED</a></li>
     <li><a href="ülevaated.html">ÜLEVAATED/ARVUSTUSED</a></li>
     <li><a href="login.html" id="logimine">LOGI SISSE</a></li>
    </ul>
   </div>
 </nav>
 <div class="content">
  <div id="logo">
   <img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
  </div> 
 </div>
 <div class="artikkel">
  <p>check check</p>
 </div>
</body>
</html>

感谢一些帮助，我正在努力的第一个真正的网页，尝试了很多东西，但似乎无法找到妥协，总有一件事情有效，然后另一件事情无法正常工作..

Answer 1

您应该删除position:absolute;上的float:left;和#navBar，如下所示：

FIDDLE

CSS：

#navBar {
    width: 100%;
    background-color: #000000;
    left: 0;
    overflow: hidden;
}
#navBar ul {
    margin: 0 auto;
    height: 65px;
    list-style:none;
}
#navBar li {
    float: left;
    height: 65px;
}
#navBar li a:link, a:visited {
    font-size: 90%;
    display: block;
    color: #ffffff;
    padding: 20px 25px;
    font: 18px"open sans", sans-serif;
    font-weight: bold;
    text-decoration: none;
}
#navBar li a:hover {
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
}

希望导航栏在最小化浏览器窗口时不移动

1 个答案: