时间戳

首页 > 解决方案 > 使用 flexbox 将导航栏中的 li 拆分到不同的侧面

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

问题描述

我正在尝试设置我的导航栏，因此左侧有 github 和linkedin imgs/links，但我想保留右侧的 bio/portfolio/contact 链接。

我在导航上使用 flexbox，但我不确定我是否可以拆分这个 ul 以使 lis 位于不同的侧面。

我在导航上使用 flexbox，但我不确定我是否可以拆分这个 ul，以便 lis 位于不同的侧面，因为我有 justify-content: space-between on。

我不知道我应该改变什么来完成这项工作。

小提琴：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 链接，并将其余链接保留在右侧。

标签： htmlcss

解决方案

这里是更新版本

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>

推荐阅读