时间戳

首页 > 解决方案 > 将项目与对齐内容对齐

html - 将项目与对齐内容对齐

问题描述

我有下一个代码：

div {
  display: flex;
  justify-content: space-between;
}

div li {
  list-style: none;
}

.menu li:nth-of-type(1)::after,
.menu li:nth-of-type(2)::after,
.menu li:nth-of-type(3)::after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  display: inline-block;
  color: #8f81ca;
  font-size: 5px;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class='menu'>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>Four</li>
</div>

我想将所有项目与 对齐justify-content:space-between，但点不在每个项目的中间对齐，它们保持在文本附近。那么，谁知道如何使用相同的结构对齐所有元素？

标签： htmlcssflexbox

解决方案

这是因为“点”不是一个单独的项目，它在你的li项目内部。你可以做的是把li“点”分开

div {
  display: flex;
  justify-content: space-between;
}

div li {
  list-style: none;
}

.dot::after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  display: inline-block;
  color: #8f81ca;
  font-size: 5px;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class='menu'>
  <li>one</li>
  <li class="dot"></li>
  <li>two</li>
  <li class="dot"></li>
  <li>three</li>
  <li class="dot"></li>
  <li>Four</li>
</div>

推荐阅读