代码之家 › 专栏 › 技术社区 › DMJ

在CSS中,如果项目在同一行,如何在项目之间放置分隔符?

css

DMJ · 技术社区 · 4 年前

我有一份清单 inline-block 块容器内的元素。根据屏幕尺寸,这些元素可能会也可能不会覆盖多条线。这正是我想要发生的。

但是,如果其中两个元素彼此相邻 在同一条线上 ,我想在它们之间放一颗子弹或其他分隔物。我知道我可以使用 + 操作员与 ::before 伪元素在元素之间放置分隔符。我使用这种方法的唯一问题是,分隔符伪元素也放在连续行的开头,这是我不想要的。我只想要元素之间的分隔符如果他们在同一条线上。

我怎样才能做到这一点?

编辑 :此外,在这种情况下,我的文本是居中对齐的

1 回复 | 直到 4 年前

ray 4 年前

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

下面的代码段为内联块项设置了负边距,这会将它们拉到容器的边界框之外,而容器的边界盒已将溢出设置为隐藏。然后,这些项目使用等效的左填充将内容向右推,使其显示在通常的位置。

伪元素::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>