使用:not(:last-child):在无序列表中的每一行的伪元素之后

Question

我正在尝试创建一个在活动中表演的艺术家名单.我希望它看起来像这样:

期望的效果

我正在使用这样的无序列表:

 ul { padding-left: 0;
  margin-left: 0;
  display: flex;
  flex-flow: row wrap;
 }
 
 li {
  list-style: none;
 }
 
.lineup-list li:not(:last-child):after {
  content: " . "
}

<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>

这有效......但在每一行的末尾都有一段我不想要的时期.如果我要手动完成并添加一个句点,它仍然无法解决问题,因为如果有人调整屏幕大小,则句点将再次位于错误的位置.

物品是否有办法在它们不在行的末尾时有它们之间的间隔？谢谢.

Answer 1

像这样的东西怎么样 --> https://jsbin.com/mereqex/edit?html,css,output

CSS：

ul {
   padding-left: 0;
   margin-left: 0;
   text-align: center;
}

li {
  display: inline;
}

.lineup-list li:not(:first-child):before {
  content:  " \B7  ";
}

.lineup-list li:nth-child(3n):before {
  content: "\A";
  white-space: pre;
}

HTML：

<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>