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）使点成为flex容器的一部分，而justify-content将按预期工作。

您还可以使用:not()

简化CSS

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>

使内容与合理内容对齐

2 个答案: