现代标准解法是给父容器设 display: flex，天然无视 html 换行符，自动水平排列按钮；用 gap 统一控间距，避免 inline-block 的空白间隙和 float 的清除难题，兼顾响应式与无障碍。
用 display: flex 一行搞定水平排列
别折腾 inline-block 的空白间隙，也别用已淘汰的 float 清浮动。现代标准解法就是给父容器加 display: flex，它天然无视 HTML 换行符、自动处理对齐和间距。
-
gap替代margin：直接设gap: 8px，不用再给每个按钮写margin-right，也不会出现最后一个按钮多出空隙的问题 - 默认主轴是水平的，所以按钮自动左到右排列，无需额外声明
flex-direction: row - 如果按钮文字长度差异大，又想等宽，加
button { flex: 1; }；若想按内容自适应宽度，就不要加flex，只靠gap控制间距即可 - 注意：父容器必须有明确宽度（比如
width: 100%或不设限），否则在某些嵌套场景下可能收缩得过小
为什么 inline-block 总是错位
不是代码写错了，是 HTML 解析规则在作怪——两个 button 标签之间的换行或空格，会被浏览器渲染成一个空白字符，导致按钮间多出约 4px 间隙。
- 常见“修复”写法：
.btn-group { font-size: 0; }+button { font-size: 14px; }，但会干扰子元素继承链，尤其影响图标字体或em单位计算 - 更隐蔽的问题：
vertical-align默认是baseline，按钮底部对齐线不一致时，视觉上就像高低不平 - 移动端缩放后，这种间隙可能忽大忽小，调试困难；而
flex+gap完全不受文本渲染影响
响应式断行时别让按钮挤成一团
桌面端横排没问题，一到手机上所有按钮堆成竖条还溢出容器？关键不在按钮本身，而在父容器的弹性行为控制。
- 加
flex-wrap: wrap允许换行，但默认每行只放一个按钮——因为没限制单个按钮最大宽度 - 给按钮加
min-width: max-content或具体值如min-width: 120px，防止小屏下被压扁 - 更稳妥的做法：用
flex-basis配合flex-grow，例如button { flex: 1 1 calc(50% - 8px); }，在两列布局下自动均分且留出gap空间 - 避免用
white-space: nowrap强制不换行，这会导致横向滚动或内容截断
按钮组里混入下拉菜单怎么办
纯按钮横排简单，但一旦插入 div 包裹的下拉结构（比如带 dropdown-menu 的按钮），Flex 布局容易崩——因为那个 div 默认是块级，高度/宽度不可控。
- 把下拉容器也设为
display: flex或至少display: inline-flex，让它参与同一根 Flex 主轴 - 确保下拉触发按钮和菜单容器共用同一个父级，不要让菜单脱离按钮组 DOM 层级
- 菜单弹出层（
.dropdown-menu）必须用position: absolute脱离文档流，否则会撑开 Flex 容器高度 - 如果下拉项太多导致整体宽度超标，优先限制菜单宽度（
max-width）而非压缩按钮，语义和可用性更重要
实际项目里最常被忽略的，是按钮组容器的 box-sizing 和内边距。很多人只写 padding，却忘了 box-sizing: border-box ——结果加了 gap 还是算不准总宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
