Flexbox：将两个项目对齐在同一个li中

Question

我正在使用flexbox组合菜单来控制布局。在具有下拉菜单的菜单项上，我使用after伪类插入了一个字体真棒图标作为指示符。

我遇到的问题是让图标与菜单项内联。

HTML

<nav>
  <ul>
    <li class="nav-blue"><a href="#" title="Home">Library services</a></li>
  </ul>
</nav>

萨斯

nav
  ul
    display: flex
    width: 100%
    list-style: none
    margin: 0 0 1.5rem 0
    padding: 0

    li
        flex: 1 1 100%
        color: $dark-grey
        font-weight: 600
        display: block
        text-decoration: none
        transition: all .25s ease-in-out
        justify-content: space-around

    .nav-blue
        border-bottom: 6px solid $blue-prim

        &::after
            content: "\f107"
            font-family: FontAwesome
            color: $grey-2

        &:hover
            background-color: $blue-light
            border-bottom: 6px solid $blue-dark
            transform: scale(1.1)

    a,
    a:visited
        color: $dark-grey
        display: block
        padding: 1rem 0
        transition: all .25s ease-in-out

        &:hover,
        &:active
            color: white
            padding-left: 5px
            box-sizing: border-box

Answer 1

使图标与文字对齐的更改是：

.nav-blue { position: relative...

.nav-blue::after { position: absolute...

演示

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

nav ul {
  display: flex;
  width: 100%;
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  flex: 1 1 100%;
  color: darkgrey;
  font-weight: 600;
  display: block;
  text-decoration: none;
  justify-content: space-around;
  transition: all .55s ease;
}

nav ul li.nav-blue {
  border-bottom: 6px solid blue;
  position: relative;
}

nav ul li.nav-blue::after {
  content: "\f107";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #000;
  font-size: 24px;
  padding-right: 0.5em;
  position: absolute;
  top: 30%;
  left: 35%;
  transform: rotate(-90deg);
  transform-origin: calc(50% - 6px);
  transition: transform .75s ease;
  cursor: pointer
}

nav ul li.nav-blue:hover {
  background-color: lightblue;
  border-bottom: 6px solid darkblue;
  transform: scale(1.1) translate(5%);
}

nav ul li.nav-blue:hover::after {
  transform: rotate(0);
  transform-origin: calc(50% - 6px);
  transition: transform .25s ease;
}

nav ul a,
nav ul a:visited {
  color: darkgrey;
  display: inline-block;
  padding: 1rem 0;
}

nav ul a:visited,
nav ul a:hover,
nav ul a:active {
  color: white;
  padding-left: 5px;
}

<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
  <ul>
    <li class="nav-blue">
      <a href="#" title="Home">Library services</a>
    </li>
  </ul>
</nav>