Question

无论我改变什么，它总是显示在两条线上。没有flexbox可能有一种更简单的方法，但我想学习如何使用flexbox属性。

我希望的结果是在左边显示第一个无序列表，在同一行显示最右边（结束）的第二个无序列表。

.navigation ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  flex-wrap: nowrap;
}

.leftNav {
  justify-content: flex-start;
}

.rightNav {
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
}

<header>
  <nav class="navigation">
    <div class="leftNav">
      <ul>
        <li>Menu</li>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
        <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">
      <ul>
        <li><a href="">My Account</a></li>
        <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>
</header>

Answer 1

看起来只是声明导航作为flex元素就可以了，不需要任何进一步的弹性设置。值得注意的是，它的行为是这样的，因为行方向是默认行。

关于flex-wrap，在这里根本没有必要，因为它没有那么多的内容可以包装（或者根本不会取决于你的目标）。这是来自mozilla的nice pic，展示了flex-wrap的使用。

justify-content也是需要为整个flex组设置的属性。这里the pic证明了这一用途。

我相信你希望左边的导航贴在左边，右边的导航贴在右边。在这种情况下，您只需指定justify-content: space-between;，因为我之前解释过几句话。

＆＃13;

.navigation{
  display:flex;
  justify-content: space-between;
}

＆＃13;

 <nav class="navigation">
    <div class="leftNav">
      <ul>
       <li>Menu</li>
       <li><a href="">One</a></li>
       <li><a href="">Two</a></li>
       <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">  
      <ul>
       <li><a href="">My Account</a></li>
       <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>

＆＃13;

Answer 2

希望这有帮助

https://jsfiddle.net/cec5wqv5/5/

HTML

<body>
<header>
  <nav class="navigation">
    <div class="leftNav">
      <ul>
       <li>Menu</li>
       <li><a href="">One</a></li>
       <li><a href="">Two</a></li>
       <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">  
      <ul>
       <li><a href="">My Account</a></li>
       <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>
</header>
</body>

CSS

.navigation{
  display: flex;
  justify-content: space-between; 
}
.navigation ul {
  list-style: none;
  display: flex;
}

.navigation a {
  text-decoration: none;
  margin: 8px;
}

尝试使用flexbox在同一行上显示两个无序列表

2 个答案: