时间戳

首页 > 解决方案 > 对无序列表中的每一行使用 :not(:last-child):after 伪元素

html - 对无序列表中的每一行使用 :not(:last-child):after 伪元素

问题描述

我正在尝试创建要在活动中表演的艺术家列表。我希望它看起来像这样：

预期效果

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

 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>

这行得通......但在每一行的末尾都有一个我不想要的时期。如果我要手动完成并添加一个句点，它仍然无法解决问题，因为如果有人调整他们的屏幕大小，这些句点将再次出现在错误的位置。

有没有办法让项目只有在它们不在行的末尾时才在它们之间有句点？谢谢。

标签： htmlcsscss-selectorspseudo-element

解决方案

像这样的东西怎么样-> 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>

推荐阅读