在 CSS 中，如果项目在同一行，如何在项目之间放置分隔符？ [复制]

Question

我有一个块容器内的inline-block 元素列表。根据屏幕大小，这些元素可能会或可能不会覆盖多行。这正是我想要发生的事情。

但是，如果其中两个元素彼此相邻在同一行，我想在它们之间放置一个项目符号或其他分隔符。我知道我可以将+ 运算符与::before 伪元素结合使用，在元素之间放置分隔符。我使用这种方法的唯一问题是将分隔符伪元素放在连续行的开头，这是我不想要的。我只想要元素之间的分隔符 if 它们在同一行。

我怎样才能做到这一点？

编辑：另外，我的文字在这种情况下居中对齐

Answer 1

我认为您可以通过一些巧妙的负边距和溢出隐藏来实现目标。

下面的 sn-p 为 inline-block 项目设置负边距，这具有将它们拉到容器边界框之外的效果，该边界框已将溢出设置为隐藏。然后，这些项目使用等效的左侧填充将内容推到右侧，因此它会出现在正常位置。

::before 伪元素仍然存在于该行的第一项，但它被容器剪裁了。

ul {
  overflow: hidden;

  /* boilerplate. not relevant to the question */
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  display: inline-block;
  padding: 1rem;
  margin-left: -1rem;
}

li::before {
  content: '+';
  position: absolute;
  left: 0;
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>