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

【问题标题】：Would like navbar not to move when minimizing browser window最小化浏览器窗口时希望导航栏不移动
【发布时间】：2014-05-12 10:39:03
【问题描述】：

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

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

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

【问题讨论】：

我的回答是否满足您的要求，还是您需要更多帮助？如果您的问题已解决，请在左上方勾选我的答案：)

标签： css navbar nav

【解决方案1】：

您应该像这样删除#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;
}

【讨论】：

这并没有改变它仍然会自行塌陷的事实。
另外，如果你想让它在滚动时也保持在顶部，请添加 position: fixed;
@Mike 是的，但它不再与网站内容重叠，并在您减小窗口大小时将其向下推
啊，好吧，我知道你要去哪里了......我一直在关注他根本不希望它崩溃的事实。
@Mike 如果您真的不希望它移动，您可以像这样将min-width 添加到<ul>：jsfiddle.net/webtiki/8cBY2/4