Question

我有一个inline-flex元素，其中包含很少信息的徽章。目标是始终保持按钮可见，但将徽章逐个包裹在较小的设备上。

我希望按钮始终贴在最后一个徽章上。

问题是，当徽章卷起并消失时，它会在剩余的可见徽章和按钮之间留下一些空白或结构。

如何使用纯CSS删除此空间？

＆＃13;

.badges {
  border: 1px solid red;
  height: 25px;
  max-height: 25px;
  line-height: 25px;
  padding-right: 120px;
  /* creates space for the button */
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-wrap: wrap;
}

.badges .badge {
  border: 1px solid green;
}

.badges button {
  width: 120px;
  max-width: 120px;
  min-width: 120px;
  height: 25px;
  position: absolute;
  right: 0;
}

＆＃13;

<div class="badges">
  <div class="badge">FooBar 418$</div>
  <div class="badge">Baz 132$</div>
  <div class="badge">BarFoo 321$</div>
  <div class="badge">Qux 500$</div>
  <button>Find out more</button>
</div>

＆＃13;

Answer 1

您可以在flex-grow: 1;上添加.badge，告诉它占用所有可用空间。

.badges {
  border: 1px solid red;
  height: 25px;
  max-height: 25px;
  line-height: 25px;
  padding-right: 120px;
  /* creates space for the button */
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-wrap: wrap;
}

.badges .badge {
  border: 1px solid green;
  flex-grow: 1; 
}

.badges button {
  width: 120px;
  max-width: 120px;
  min-width: 120px;
  height: 25px;
  position: absolute;
  right: 0;
}

<div class="badges">
  <div class="badge">FooBar 418$</div>
  <div class="badge">Baz 132$</div>
  <div class="badge">BarFoo 321$</div>
  <div class="badge">Qux 500$</div>
  <button>Find out more</button>
</div>

如何在下面包含flex元素后删除剩余的空格？

1 个答案: