两部分导航。一个居中，另一个右对齐答案

【问题标题】：Two part navigation. One centered and the other right aligned两部分导航。一个居中，另一个右对齐
【发布时间】：2018-12-28 13:45:17
【问题描述】：

我正在使用 CSS 框架 Bulma（第一次），虽然我的问题可能不是 Bulma 特定的，但我想我会包括清楚。

我有一个导航栏，它有一组居中的链接，但也有右对齐元素。截图如下：

您可以忽略左侧的固定叶子。我想知道如何让购物车和登录按钮右对齐，同时让其他位居中对齐。

这是我尝试过的codepen。我只是不知道让汽车和登录正确对齐的正确方法。我的意思是我可以绝对定位它们，但这听起来很傻。

HTML 代码

<nav class="navbar is-fixed-top">
  <a href="">Products</a>
  <a href="">Our Story</a>
  <div id="logo">Logo placeholder</div>
  <a href="">Blog</a>
  <a href="">Contact Us</a>
</nav>

CSS 代码

nav {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #194522;
  font-weight: bold;
  margin: 0 40px;
  display: flex;
  align-items: center;
}

nav a:hover {
  color: #abcf39;
}

我怎样才能获得这样的导航？

【问题讨论】：

看看stackoverflow.com/questions/38948102/…

标签： html css bulma

【解决方案1】：

Bulma 在其navbar 中有两个区域，称为navbar-start 和navbar-end，用于控制对齐。只需添加一个附加类（在我的示例中：navbar-start--centered）以使“起始区域”适应您的需求：

.navbar-start--centered {
    flex-grow: 1;
    justify-content: center;
}

这里是codepen to play with。

用宽视口查看它 - 它仅适用于桌面。如果您希望视口中心的起始区域，您还可以绝对定位“结束区域”。

.navbar-start--centered {
    flex-grow: 1;
    justify-content: center;
}

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div id="navbarBasicExample" class="navbar-menu">

    <div class="navbar-start navbar-start--centered">
      <a class="navbar-item" href="">Products</a>
      <a class="navbar-item" href="">Our Story</a>
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>
      <a class="navbar-item" href="">Blog</a>
      <a class="navbar-item" href="">Contact Us</a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
                <span class="icon">
                  <i class="fas fa-shopping-cart"></i>
            </span>
            <span>Cart</span>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>

  </div>
</nav>

【讨论】：

【解决方案2】：

您可以在左侧添加一个空元素（作为占位符），在右侧添加一个（保存链接）并将它们设置为flex:1 .

然后使用正常的 flex 定位将第二个 (right) 容器的内容设置为右对齐。

nav {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #194522;
  font-weight: bold;
  margin: 0 40px;
  display: flex;
  align-items: center;
}

nav a:hover {
  color: #abcf39;
}
.nav-container{
  display:flex;
  flex:1;
  justify-content: flex-end;
}
.nav-container a {
  margin:0 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />

<nav class="navbar is-fixed-top">
  <div class="nav-container"></div>
  <a href="">Products</a>
  <a href="">Our Story</a>
  <div id="logo">Logo placeholder</div>
  <a href="">Blog</a>
  <a href="">Contact Us</a>
  <div class="nav-container">
  <a href="">?</a>
  <a href="">Login</a>
  </div>
</nav>

【讨论】：