Question

考虑以下示例，其中我在容器元素中有多个inline-block元素，这些元素的宽度可能会缩小到其中的元素将换行的点。

我希望每个＆＃34;行＆＃34;之间有一点空间。或包含的元素。使用margin-top或margin-bottom我获得了我想要的空间。但是，在第一行或最后一行元素上有一小部分空间。

有没有办法定位换行元素而不是第一行呢？

＆＃13;

#container {
  width: 10em;
  background-color: blue;
}
#container > span {
  display: inline-block;
  padding: 0.25em;
  margin: 0;
  background-color: lightblue;
}
#container > span:not(:last-child) {
  margin-right: 0.25em;
}
/*The following rule doesn't exist*/

#container > span:not(:first-row) {
  margin-top: 0.25em;
}

＆＃13;

<div id="container">
  <span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>

＆＃13;

Answer 1

有没有办法定位换行元素而不是第一行呢？

不，不是现在。

但是，在第一行或最后一行元素上有一小部分空间。

在大多数情况下，您应该能够通过容器元素的负边距来缓解这个问题，如下所示：

#container {
  width: 10em;
  margin-bottom: -0.25em;
  background-color: blue;
}
#container > span {
  display: inline-block;
  padding: 0.25em;
  margin: 0 0 .25em 0;
  background-color: lightblue;
}
#container > span:not(:last-child) {
  margin-right: 0.25em;
}

.test { background:red; }

<div id="container">
  <span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
<div class="test">I am where I should be.</div>

（添加红色div表示它与前一个元素之间没有偏移。）

Answer 2

你不能将一堆跨度作为一排，特别是当他们不再适合在一条线上时，它们就会被包裹起来。

例如，您需要将内容包装在<div class="row">中。然后你可以说.row:first-child { /* Custom styling */ }。

将来可能会出现这种情况，但目前无法做到。

你能控制或瞄准被包裹元素的风格吗？

2 个答案: