html - 使用 flexbox 将导航栏中的 li 拆分到不同的边

Question

我正在尝试设置我的导航栏，所以我在左侧有 github 和 linkedin imgs/链接，但我想在右侧保留个人资料/投资组合/联系人链接。

我在 nav 上使用了 flexbox，但我不确定我是否可以拆分这个 ul，这样 lis 就在不同的边上。

我在 nav 上使用 flexbox，但我不确定我是否可以拆分这个 ul，这样 lis 在不同的边上，因为我有 justify-content: space-between 。

我不知道我应该更改什么才能使这项工作成功。

fiddle :https://jsfiddle.net/Ginsole/4svpeLq9/

nav {
    background-color: #265B8B;
    height:60px;
    color: white;
    position: fixed;
    top:0;
    left:0;
    right:0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

nav p {
    font-weight: bold;
    margin-left: 1em;
    color: white;
    text-align: left;
    margin-top:1.25em;
    font-size: 1em;
}

nav a {
    color: white;
    font-size: 1em;
    font-weight: bold;
}

nav ul {
    margin-bottom: 5em;
    display: flex;
    margin-top: 1.25em;
}

nav li {
    list-style: none;
    margin-right: 1em;
}

nav li.github {
    margin-left: auto;
}

nav img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.menu-toggle {
    position: absolute;
    padding: 0.8 em;
    top: 1em;
    right: 1em;
    cursor: pointer;
}

<nav>
  <p>STEVEN KANG</p>
  <ul>
      <li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
      <li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
      <li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
      <li class="leftLinks"><a href="https://github.com/skang28" target="_blank"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"></a></li>
      <li class="leftLinks"><a href="https://www.linkedin.com/in/stevenkangj" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></a></li>
   </ul>
  <div class="menu-toggle">
      <a href="javascript:void(0);" class="icon"><i class="fa fa-bars"></i></a>
  </div>
</nav>

    

我希望在左侧有两个 img 链接，并在右侧保留其余链接。

Answer 1

这是更新的版本

https://jsfiddle.net/chille1987/236x0ntq/9/

nav {
    background-color: #265B8B;
    height:60px;
    color: white;
    position: fixed;
    top:0;
    left:0;
    right:0;
    width: 100%;
    display: flex;
}

nav p {
    font-weight: bold;
    margin-left: 1em;
    color: white;
    text-align: left;
    margin-top:1.25em;
    font-size: 1em;
}

nav a {
    color: white;
    font-size: 1em;
    font-weight: bold;
}

nav ul {
    flex: 1;
    margin-bottom: 5em;
    display: flex;
    flex-direction: row-reverse;
    margin-top: 1.25em;
}

nav li {
    list-style: none;
    margin-right: 1em;
}

nav li.linkedin {
  margin-right: auto;
}

nav img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.menu-toggle {
    position: absolute;
    padding: 0.8 em;
    top: 1em;
    right: 1em;
    cursor: pointer;
}

    <nav>
        <p>STEVEN KANG</p>
        <ul>
            <li class="rightLinks contact"><a data-scroll-target="contact">Contact</a></li>
            <li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
            <li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
            <li class="leftLinks linkedin"><a href="https://www.linkedin.com/in/stevenkangj" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></a></li>
            <li class="leftLinks github"><a href="https://github.com/skang28" target="_blank"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"></a></li>
         </ul>
        <div class="menu-toggle">
            <a href="javascript:void(0);" class="icon"><i class="fa fa-bars"></i></a>
        </div>
    </nav>