当浏览器窗口最小化时，希望导航栏不要移动。

Question

当浏览器窗口最小化时，希望导航栏不要移动。

3

我已经让我的导航栏按照我的要求工作了，但是现在，再次出现了问题，当我缩小窗口时，包含所有链接的导航栏会折叠，并且它几乎看起来相当不错，但它会覆盖我的内容区域，一些链接文本会穿过导航栏区域，我必须隐藏它等等。所以我认为最简单的方法是使导航栏完全不移动，而只需随着整个页面可滚动即可。

这是我的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>

希望能得到您的帮助，这是我正在开发的第一个真正的网页。尽管我已经尝试了很多方法，但似乎无法找到一个妥协点，总是一件事情能够运行，但另一件事情就不能按照预期工作。

- user3086917

我的回答是否满足了您的需求，或者您需要更多的帮助？如果您的问题已经解决，请在左上角勾选我的答案作为接受答案 :) - web-tiki

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

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

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;
}