html - 如何显示具有固定位置的内联列表？

Question

我正在尝试显示一个内联列表，前 5 个元素向左拉，最后 2 个元素向右拉，如下所示:

当用户滚动经过时，这个内联列表需要紧贴屏幕顶部，因此我需要设置 position: fixed 和 top: 0px。但是，当我尝试这样做时，列表的左侧最终堆叠到右侧，如下所示:

有没有办法在使用固定位置的同时保留列表的内联显示？如果没有，这个问题还有哪些其他解决方案？

这是我的代码，如果有乱码或格式不正确，请见谅。我刚开始玩网络开发:

CSS:

.menu-header {
  background-color: #2658C9;
}
.menu-header .pull-left {
  margin-left: 10%;
  overflow: hidden;
  white-space: nowrap;
}
.menu-header .pull-right {
  margin-right: 10%;
  overflow: hidden;
  white-space: nowrap;
}
.menu-header ul {
  padding-left: 0px;
  display: inline;
}

HTML:

<div class="menu-header">
  <div class="row">
    <ul class="menu-header-list">
      <div class="pull-left">
        <li><a href="index.html" class="menubutton">Home</a></li>
        <li><a href="#" class="menubutton">Tech</a></li>
        <li><a href="#" class="menubutton">Tutorials</a></li>
        <li><a href="#" class="menubutton">Articles</a></li>
        <li><a href="#" class="menubutton">Papers</a></li>
      </div>
      <div class="pull-right">
        <li><a href="#" class="menubutton">About</a></li>
        <li><a href="#" class="menubutton">Contact</a></li>
      </div>
    </ul>
  </div>
</div>  

任何帮助将不胜感激，因为我已经尝试修复此问题数小时了。更改显示和使用 float 并没有解决问题。谢谢!

Answer 1

试试这个 Fiddle

.navbar {
  background: #2658C9;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar-default .navbar-nav > li > a{
  color: white;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">

      <ul class="nav navbar-nav pull-left">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>

      <ul class="nav navbar-nav pull-right">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>

  </div>
</nav>