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>

这行得通...但是在每一行的末尾都有一个我不想要的时间段。如果我要手动检查并添加一个句号，它仍然不能解决问题，因为如果有人调整屏幕的大小，则句号将再次出现在错误的位置。

仅当项目不在ROW的末端时，才有办法使项目之间具有句点吗？谢谢。

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>

在无序列表内的每一行中使用：not（：last-child）：after伪元素

1 个答案: