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

概述我有一个inline-flex元素,包含很少信息的徽章. 目标是始终保持按钮可见,但将徽章逐个包裹在较小的设备上. 我希望按钮始终坚持最后一个徽章. 问题是,当徽章卷起并消失时,它会在剩余的可见徽章和按钮之间留下一些空白或结构. 如何使用纯css删除此空间？ .badges { border: 1px solid red; height: 25px; max-height: 25px; 我有一个inline-flex元素,包含很少信息的徽章.
目标是始终保持按钮可见,但将徽章逐个包裹在较小的设备上.

我希望按钮始终坚持最后一个徽章.

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

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

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

<div >  <div >Foobar 418$</div>  <div >Baz 132$</div>  <div >barFoo 321$</div>  <div >Qux 500$</div>  <button>Find out more</button></div>

谢谢！

@H_404_25@解决方法 你可以添加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 >  <div >Foobar 418$</div>  <div >Baz 132$</div>  <div >barFoo 321$</div>  <div >Qux 500$</div>  <button>Find out more</button></div>

总结

以上是内存溢出为你收集整理的html – 如何在下面包含flex元素后删除剩余的空格？全部内容，希望文章能够帮你解决html – 如何在下面包含flex元素后删除剩余的空格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。