Question

我有两种类型的按钮：

span是第一个孩子的按钮
span是最后一个孩子的按钮

我希望控制范围和文本之间的空间 - 而无需添加更多HTML或类。可能吗？

使用伪选择器:first-child或:last-child无法正常工作，因为span始终是第一个和最后一个孩子。

＆＃13;

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

＆＃13;

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

＆＃13;

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

编辑2 ：由于灵活性，我想保留flexbox。

Answer 1

好的问题是，根据您设定的标准，这是不可能的。您试图以不同的方式设置元素，从css角度来看，这些元素完全相同。两个版本＆＃39;只是<span/>内的<button/>，按钮内部有文字，并且它位于跨度之前/之后对任何css规则都没有影响。

您将获得一个非常不灵活的解决方案（即使用nth-child()或类似的东西手动选择每个元素）。或者你必须改变你的标记。要更改标记，可以在跨区中添加类，也可以将文本包装在元素中（例如p）。如何使用类是非常直接的，通过包装文本，您可以正确使用first-child和last-child伪选择器，如此

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

~~您可以通过添加：~~

来完成此操作
// Span last child span:before { content: ''; display: inline-block; margin-right: 10px; } // Span first child span:after { content: ''; display: inline-block; margin-left: 10px; }

向First-child-span你的Last-child-span按钮输入button { display: inline-block; } span { display: inline-block; }。如果没有为这两种按钮添加课程，我不认为这是可能的。

编辑：

＆＃13;

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

＆＃13;

&&

＆＃13;

Flexbox - 控制跨度和文本之间的空间

2 个答案: