CSS 选择器和内容属性在两个内联块元素之间添加一个 space 字符

Question

我有一系列 class tag 的 span 元素（来自 bootstrap v4），它们彼此相邻，中间没有任何 space它们是因为它们来自 reacj.js JSX 元素数组：

<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><!-- ... -->

这是来自 bootstrap 的 CSS:

.tag {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

这些元素可以在 table 单元格中换行。我可以在一些 javascript () 之间痛苦地添加一个 space 字符，或者添加一个带有 [=46 的包装元素（在 JSX 中只有一个根元素） =] 字符。这两个选项都不让我满意，我认为在 CSS.

中做到这一点应该很简单

我尝试了以下方法，如果它有效，那将是理想的，但它不适用于内联块元素 (https://jsfiddle.net/qjbgzzLr/) :

span.tag + span.tag::before {
    content: " ";
}

现在，我在 span.tag + span.tag 上放了一个 margin-left 但这 不理想 因为每行的第一个元素在其左边有一个边距.

有没有办法只用 CSS 来实现这个？

Answer 1

任何伪元素都将位于 span 标签内，因此不会在标签之间创建水平 space。保证金是您唯一可用的解决方案。

我建议只为每个标签添加 margin-right。

span.tag {
  margin-right: .25em;
}

span.tag {
  margin-right: .25em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />

<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
  class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
    class="tag tag-primary">text</span>

要删除最终标签的边距，您可以使用

span:last-of-type {
margin-right:0;
}

CSS 选择器和内容属性在两个内联块元素之间添加一个 space 字符

CSS selector and content property to add a space character between two inline-block elements

css

css-selectors

pseudo-element

css-content

CSS 选择器和内容 属性 在两个内联块元素之间添加一个 space 字符

CSS selector and content property to add a space character between two inline-block elements

css

css-selectors

pseudo-element

css-content

CSS 选择器和内容属性在两个内联块元素之间添加一个 space 字符