我有一个内嵌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 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>