使用伪 :before 将 flexbox 用于导航菜单，将其分成两行

Question

在我添加 :before 内容以用“|”拆分它之前，使用带有 2 个断点的媒体查询和 flexbox 工作正常：

.navigation li+li:before {
    content: '/ ';
}

JsFiddle

如何让它与菜单的其余部分保持一致？

Answer 1

您将链接设置为 block 元素，因此该行为没有任何问题。从链接中删除块属性并将其重置为 inline-block 以允许 vertical padding.

display 未设置：https://jsfiddle.net/jk37gbpn/3/

display:inline-block; https://jsfiddle.net/jk37gbpn/4/

 ul {
   list-style: none;
   margin: 0;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   justify-content: flex-end;
   font-weight: 300;
   font-size: 18px;
 }
 .navigation a {
   display:inline-block;
   text-decoration: none;
   color: #F05A24;
   padding: 14px 16px;
 }
 .navigation a:hover {
   font-weight: 400;
   color: black;
 }

 .navigation li+li:before {
   content: '/ ';
 }
 @media all and (max-width: 820px) {
   .navigation {
     justify-content: space-around;
   }
   .navigation a {
     font-size: 120%;
   }
   #logo {
     display: none;
   }
 }

<ul class="navigation">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Products</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

Answer 2

您可以在每个 li

上使用 display: flex 和 align-items: center

.navigation {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-weight: 300;
  font-size: 18px;
}
li {
  display: flex;
  align-items: center;
}
.navigation a {
  text-decoration: none;
  color: #F05A24;
  padding: 14px 16px;
}
.navigation li+li:before {
  content: '/ ';
}

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

如果你想在较小的屏幕上使用 space-around 布局并让 / 位于 li 的中间，你可以这样做

.navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  font-weight: 300;
  font-size: 18px;
}
li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.navigation a {
  text-decoration: none;
  color: #F05A24;
  padding: 14px 16px;
}
.navigation li:before {
  content: '/ ';
}
.navigation li:first-child:before {
  content: '/ ';
  color: transparent;
}

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

使用伪 :before 将 flexbox 用于导航菜单，将其分成两行

Using flexbox for navigation menu using pseudo :before is splitting it in two lines

css

pseudo-element

flexbox