Выровнять элементы по содержанию

Question

У меня есть следующий код:

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, но точки не выравниваются в середине каждого элемента, они остаются рядом с текстом. Итак, кто знает, как выровнять все элементы, используя одну и ту же конструкцию?

Answer 1

Это потому, что "точка" - это не отдельный элемент, он внутри вашего элемента 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>

Answer 2

Вы можете рассмотреть display:contents (https://caniuse.com/#feat=css-display-contents), чтобы сделать точки частью гибкого контейнера, и justify-content будет работать как положено.

Вы также можете упростить свой CSS, используя :not()

ul {
  display: flex;
  justify-content: space-between;
  align-items:center;
  margin:0;
  padding:0;
}

ul li {
  list-style: none;
  display:contents;
}

.menu li:not(:last-child)::after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  color: #8f81ca;
  font-size: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

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

Другим решением является настройка некоторых изгибных свойств для достижения этой цели.Хитрость в том, чтобы псевдоэлемент заполнил все пространство между текстом и центрировал точку внутри.

ul {
  display: flex;
  margin:0;
  padding:0;
  
}
ul li {
 list-style:none;
}
ul li:not(:last-child) {
  flex-grow:1;
  display:flex;
  align-items:center;
  
  outline:1px solid yellow;/*to illustrate*/
}

.menu li:not(:last-child)::after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  color: #8f81ca;
  flex-grow:1;
  font-size:5px;
  text-align:center;
  
  outline:1px solid pink;/*to illustrate*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

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