html - Flexbox - 控制 span 和文本之间的空间

Question

我有两种类型的按钮:

1. span 是第一个 child 的按钮
2. span 是最后一个 child 的按钮

我想控制跨度和文本之间的空间 - 而无需添加更多 HTML 或类。是否可以？

使用伪选择器 :first-child 或 :last-child 将不起作用，因为 span 始终是第一个和最后一个 child .

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span {
  display: inline-block;
}

<button>
  <span>X</span>
  Remove
</button>

<button>
  Remove
  <span>X</span>
</button>

编辑:要清楚，我只想控制文本和跨度之间的空间。所以，当 span 是第一个时，应该有一个右边距。当跨度最后时，应该是左边距。

编辑 2:由于灵 active ，我想保留 flexbox。

Answer 1

好的，问题在于您设置的标准是不可能的。从 css 的 Angular 来看，您正在尝试对完全相同的元素进行不同的样式设置。两个“版本”都只是一个 <span/>在 <button/> 里面，按钮内有文本并且它位于 span 之前/之后的事实对任何 css 规则都没有影响。

你要么得到一个非常不灵活的解决方案(即使用 nth-child() 或类似的东西手动选择每个元素)。或者你将不得不改变你的标记。要更改您的标记，您可以将类添加到跨度，或者将文本包装在一个元素中(例如 p)。它如何与类一起工作非常简单，通过包装文本你可以使用 first-child和 last-child正确的伪选择器，像这样

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span {
  display: inline-block;
}

span:first-child{
    margin-right:20px;
}

span:last-child{
    margin-left:20px;
}

<button>
  <span>X</span>
  <p>Remove</p>
</button>

<button>
  <p>Remove</p>
  <span>X</span>
</button>

<button>
  <span>X</span>
  <p>Remove</p>
</button>

<button>
  <p>Remove</p>
  <span>X</span>
</button>