跨度元素之间的 CSS 间距仅当它们在同一行时

Question

我有一组跨度，每个跨度都有“white-space: nowrap”以保持它们单独不间断。如果它们在一条线上彼此相邻，我希望它们有一些视觉间距将它们分开，但如果浏览器决定换行，我不需要或不希望在行尾留出左边距或右边距。

例如:

<div class="container">
   <span id="s1">User Option 1</span>
   <span id="s2">User Option 2</span>
   <span id="s3">User Option 3</span>
   <span id="s4">User Option 4</span>
   <span id="s5">User Option 5</span>
   <span id="s6">User Option 6</span>
   <span id="s7">User Option 7</span>
   <span id="s8">User Option 8</span>
</div>

在宽窗口中，我希望看到:

User Option 1 ________ User Option 2 ________ User Option 3 ________ User Option 4
User Option 5 ________ User Option 6 ________ User Option 7 ________ User Option 8

(我提供了下划线字符来显示我想要一些空格/填充/边距的位置。我不想看到下划线，我想要一些间距。)

但我只希望在需要时使用间距，并且当元素集在不同点处换行时它继续表现良好。所以，如果窗口稍微窄一些:

User Option 1 ________ User Option 2 ________ User Option 3
User Option 4 ________ User Option 5 ________ User Option 6
User Option 7 ________ User Option 8

或更窄:

User Option 1 ________ User Option 2
User Option 3 ________ User Option 4
User Option 5 ________ User Option 6
User Option 7 ________ User Option 8

我知道如果我只给所有内容留一个 margin-left，那么所有内容的左边都会保留不需要的空间:

________ User Option 1 ________ User Option 2 ________ User Option 3
________ User Option 4 ________ User Option 5 ________ User Option 6
________ User Option 7 ________ User Option 8

如果我在 :not:first-child 选择器中给出 margin-left，它实际上看起来有点糟糕:

User Option 1 ________ User Option 2 ________ User Option 3
________ User Option 4 ________ User Option 5 ________ User Option 6
________ User Option 7 ________ User Option 8

如果我切换到右边距，一切看起来都很好:

User Option 1 ________ User Option 2 ________ User Option 3 ________
User Option 4 ________ User Option 5 ________ User Option 6 ________
User Option 7 ________ User Option 8 ________

因为您没有看到不需要的正确边距。

但是仍然有理由提示这些元素保留了右边的空间，因此它们会因此而比必要的更快地“自动换行”，所以它们仍然具有浪费空间的不良特征权利。

CSS 中有没有真正表达我想表达的东西？

通俗地说，我会说:“margin-right-if-sibling-rendered-to-my-right”？

Answer 1

CSS Grid 解决了边距空间/环绕问题。

您可以使用以下属性在网格项之间创建分隔:

• 网格行间距
• 网格列间距
• grid--gap(以上两个属性的简写)

这些属性在元素之间创建空间，但从不在元素和容器之间创建空间。

jsFiddle demo

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
  border: 1px dashed black;
}

span {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div class="container">
  <span id="s1">User Option 1</span>
  <span id="s2">User Option 2</span>
  <span id="s3">User Option 3</span>
  <span id="s4">User Option 4</span>
  <span id="s5">User Option 5</span>
  <span id="s6">User Option 6</span>
  <span id="s7">User Option 7</span>
  <span id="s8">User Option 8</span>
</div>

然后，如果您希望容器和元素之间有空间，请向容器添加填充。

jsFiddle demo

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding: 10px;  /* added */
  border: 1px dashed black;
}

span {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div class="container">
  <span id="s1">User Option 1</span>
  <span id="s2">User Option 2</span>
  <span id="s3">User Option 3</span>
  <span id="s4">User Option 4</span>
  <span id="s5">User Option 5</span>
  <span id="s6">User Option 6</span>
  <span id="s7">User Option 7</span>
  <span id="s8">User Option 8</span>
</div>

更多细节在这里:

• Removing margin from flex items when they wrap
• Equal width flex items even after they wrap