html - 试图修复导航栏

Question

我一直在尝试解决导航栏的问题。

我想做的是始终将主页图标放在左侧，将设置放在右侧，同时将导航标题放在中间，如图所示。

但还是这个样子 当在我的笔记本电脑 1366 像素宽以外的最小/大屏幕上查看时

有没有人可以帮我解决同样的问题？

这里是代码。

<nav>
  <div class="nav__container">
    <div class="nav__container--left">
      <div class="">         
        <a href="http://localhost/mpci_virtual_office/" title="Return Home">
          <i class="fa fa-home fa-lg" aria-hidden="true"></i>
        </a>
      </div>
    </div>
    <div class="nav__container--center">
      <strong>Home</strong>
    </div>
    <div class="nav__container--toggle">
      <a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
    </div>
    <div class="nav__container--right">
      <a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
        <i class="fa fa-gear fa-lg"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a href="http://localhost/mpci_virtual_office/office/view_profile/index/1">View Profile</a></li>
        <li><a href="http://localhost/mpci_virtual_office/office/account_preference">Settings</a></li>
        <li><a href="http://localhost/mpci_virtual_office/auth/logout">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

这是我的 CSS

/* Naviation Style */
.nav__container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
  width: 50px;
  height: 100%;
  position: absolute;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items:center;
  align-content:  center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
  width: 100%;
  z-index: -1;
  text-align: center;
}
.nav__container--toggle {
  right: 50px;
}
.nav__container--right {
  right: 0;
}

Answer 1

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

试试这个 CSS 片段。如果你设置位置，你总是必须设置 top|bottom 和 left|right