如何移除inline-flex元素换行后徽章与按钮间的剩余空白？

嗨，这个问题我之前也碰到过，核心其实是两个点：一是inline-flex布局下子元素的默认间隙，二是要确保按钮始终留在可见区域且紧贴最后一个没被隐藏的徽章。给你几个纯CSS的解决方案，按需选择就行：

这是现代CSS里最简洁的方法，直接控制flex容器中子元素的间距，完全不需要调整HTML结构：

.badges {
  display: inline-flex;
  flex-wrap: wrap;
  height: 25px;
  max-height: 25px;
  overflow: hidden; /* 把换行到第二行的徽章隐藏起来 */
  gap: 0; /* 移除徽章和按钮之间、徽章之间的所有默认间隙 */
}

.badge {
  flex-shrink: 0; /* 强制徽章不被压缩，确保空间不够时逐个换行 */
  /* 这里保留你原本的徽章样式，比如 padding、border 之类的 */
}

.btn {
  flex-shrink: 0; /* 防止按钮被压缩，保证它始终保持原尺寸显示 */
}

gap属性专门用来控制flex/grid布局的子元素间距，设置为0后，不管你的HTML里徽章和按钮之间有没有换行空格，都不会出现多余空白。

如果需要兼容不支持gap的老浏览器（比如IE11），可以通过重置字体大小来消除inline元素的空格间隙：

.badges {
  display: inline-flex;
  flex-wrap: wrap;
  height: 25px;
  max-height: 25px;
  overflow: hidden;
  font-size: 0; /* 让HTML里的空白字符尺寸变成0，直接消除间隙 */
}

.badge, .btn {
  font-size: 14px; /* 把字体大小重置回你需要的数值 */
  flex-shrink: 0;
}

如果你的按钮偶尔会跟着最后一个徽章一起被挤到第二行隐藏，那可以再加个小技巧，让按钮牢牢留在第一行：

.badges {
  display: inline-flex;
  flex-wrap: wrap;
  height: 25px;
  max-height: 25px;
  overflow: hidden;
  gap: 0;
  align-content: flex-start; /* 让第一行元素顶部对齐，不浪费垂直空间 */
}

.btn {
  flex-shrink: 0;
  align-self: flex-start; /* 强制按钮在第一行顶部显示，不会被挤到下一行 */
}

这些方法都是纯CSS实现，完全不用改你的HTML结构，亲测有效～

内容的提问来源于stack exchange，提问作者Daniel