按钮组必须用语义化容器包裹，推荐Flexbox布局：设容器display: flex、gap和flex-direction，统一box-sizing: border-box，避免裸写并列button。
按钮组必须用容器包裹才能可靠并排
直接给多个 <button></button> 写 display: inline-block 或 float 会出问题，不是按钮不听使唤，而是它们没共享同一个布局上下文。浏览器默认把每个 <button></button> 当独立块级元素处理，彼此之间没有“属于同一组”的语义。
正确做法是用一个语义化容器（比如 <nav></nav>、<div class="btn-group"> 或 <code><header></header>）把所有按钮包起来，再对这个容器设布局规则。否则你调半天 vertical-align 或删空格，其实都在治标。
- 别用
<form></form>当按钮组容器——它自带提交语义和默认 margin，容易干扰对齐 - 避免裸写多个
<button></button>并列在 body 下：HTML 换行符会渲染成约 4px 空隙，且无法用 CSS 统一控制首尾间距 - 如果按钮带 SVG 图标，确保图标和文字都包裹在
<span></span>或用display: flex对齐，否则基线错位极常见
Flexbox 是目前最稳的并排方案
给按钮组容器加 display: flex，比 inline-block 少踩 80% 的坑。它天然忽略 HTML 空白符，支持 gap、justify-content、align-items 等精准控制，还能响应式切换方向。
基础写法：
立即学习“前端免费学习笔记（深入）”；
`.btn-group {
display: flex;
gap: 8px;
justify-content: flex-start;
}`
-
gap比margin-right更干净：不会在最后一个按钮右侧多出空白 - 移动端小屏下若按钮太多撑出横向滚动条，加
flex-wrap: wrap让它自动折行 - 按钮高度不一致？统一加
align-items: center和box-sizing: border-box，再设固定height或min-height - 不要只给容器设
display: flex却忘了子元素有flex-direction: column—— 这会让按钮竖着排，而不是你想的横着
响应式切换要靠媒体查询 + flex-direction
小屏竖排、大屏横排不是靠 JS 切换 class，而是用 CSS 媒体查询控制容器的 flex-direction。关键点在于：默认用竖向（mobile-first），再在中大屏改回横向。
典型配置：
`.btn-group {
display: flex;
flex-direction: column;
gap: 6px;
}
@media (min-width: 768px) {
.btn-group {
flex-direction: row;
gap: 12px;
}
}
- 别在
@media里重复写display: flex—— 它已在默认样式里声明，重复写只是冗余 - 如果按钮文字过长导致横排时溢出，给每个
<button></button>加white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 用
flex-wrap: wrap替代white-space: nowrap：后者强行压一行，前者允许合理折行，更健壮
按钮对齐错位往往是因为 box-sizing 或 height 不一致
看着都是按钮，但一个带图标、一个纯文字、一个用了 em 字号、一个用 px，实际渲染高度就不同。这时 align-items: center 也救不了，因为基线或盒模型计算已失准。
- 统一设
box-sizing: border-box在按钮上，避免padding和border加到宽高外 - 避免混用
height和line-height控制高度：前者更可控，后者依赖字体渲染，跨浏览器表现不一 - 图标按钮建议用
display: inline-flex; align-items: center; gap: 4px;包裹图标和文字，比纯inline-block更稳 - 调试时打开浏览器开发者工具，直接看每个按钮的 computed height 和 baseline 位置，比猜更快
line-height 影响垂直居中、box-sizing 默认是 content-box。动手前先确认容器是否真被赋予了布局上下文，比反复调 margin 有用得多。
