Question

我有一组跨度，每个跨度都有“white-space：nowrap”，以保持它们不会断裂。如果它们在一条线上彼此相邻，我希望它们有一些视觉间距将它们隔开，但如果浏览器决定换行，我不需要或想要在行的末端留下左边或右边距。 / p>

例如：

<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

我知道如果我只留下一个边距，那么在所有内容的左边都会留下不需要的空间：

________ 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中是否存在真正说出我想说的内容？

通俗地说，我会说：“边缘 - 右边 - 兄弟 - 渲染到我右边”？

Answer 1

边缘空间/包裹问题已由CSS Grid解决。

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

grid-row-gap
grid-column-gap
grid--gap（上述两个属性的简写）

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

jsFiddle demo

＆＃13;

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

＆＃13;

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

＆＃13;

然后，如果您想在容器和项目之间留出空格，请在容器中添加填充。

jsFiddle demo

＆＃13;

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

＆＃13;

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

＆＃13;

此处有更多详情：

Answer 2

我认为对于描述的特定布局，使用 CSS Grid 比使用flexbox更合适。我们来看看它如何呈现布局：

我们使父容器 （网格容器）具有display:grid属性。
我们justify the contents使用space-between，因此网格项目位于其末端（与 flexbox 不同，当空间可用时，网格项目不会浮动到最右侧）
我们使用固定宽度定义模板列，之后它将换行到下一行。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: space-between;
  text-align: center;
}

.grid-container>* {
  background-color: gray;
  color:white;
  border:2px solid black;
  margin:2px 0px 2px 0px;
}

<div class="grid-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>

span元素之间的CSS间距仅在它们位于同一行

2 个答案: