按钮加min-width无效需先检查display类型，若为inline须设inline-block或block；flex容器中须显式设min-width:0；还需配合white-space:nowrap、box-sizing:border-box及min-height确保触控体验。
按钮加 min-width 没反应？先看 display 类型
购物车按钮（比如 <button class="add-to-cart">加入购物车</button>）写了 min-width: 120px 却还是被压成一条线，大概率是因为它被当成 inline 元素处理了——min-width 对非替换的内联元素不生效。
检查开发者工具「Computed」面板里的 display 值。如果显示为 inline（常见于某些 CSS Reset 或全局 * { display: inline }），必须显式覆盖：
-
display: inline-block（推荐，保持行内流） - 或
display: block（适合独占一行的场景） - 别只写
min-width，没激活盒模型就等于白写
Flex 容器里购物车按钮塌缩？漏了 min-width: 0
把购物车按钮放进 display: flex 的商品卡片、工具栏或购物车摘要区域时，即使写了 min-width: 120px，它仍可能缩到文字宽度——这是 Flex 子项默认隐含的 min-width: auto 在作祟。
必须显式解除这个“锁”：
- 给按钮加
min-width: 0（清空默认最小约束） - 再写你想要的
min-width: 120px或min-width: 44px（触控底线） - 或者一步到位：
min-width: max(120px, min-content)（现代写法，需查兼容性）
漏掉 min-width: 0 这一行，后面所有 min-width 都不会生效。
防文字换行撑高 + 横向溢出？white-space 和 box-sizing 得配齐
小屏下“加入购物车”五个字一换行，按钮高度突增、视觉上像“变宽”，这不是 min-width 能管的；而加了 padding 后总宽又超父容器，是盒模型惹的祸。
关键组合要一起上：
-
white-space: nowrap：防换行（适合按钮文字固定、不希望折行的场景） -
box-sizing: border-box：确保width/min-width包含padding和border，避免意外撑破布局 - 全局建议加
* { box-sizing: border-box }，省得每个按钮单独补
如果文字确实可能超长（比如促销语“加入购物车享限时85折”），还得配 overflow: hidden + text-overflow: ellipsis，但前提是 white-space: nowrap 和 display: block 或 inline-block 已就位。
移动端触控区域不足？min-width 和 min-height 必须成对设
购物车按钮在手机上点不中、误触率高，往往不是“宽不够”，而是整个可点区域小于 44×44px——W3C 和 iOS/Android 官方都明确要求的最小触控尺寸。
单设 min-width: 44px 不够，必须同步控制高度：
-
min-width: 44px+min-height: 44px - 配合足够
padding（如padding: 10px 20px），用热区扩展代替硬设height - 禁用
height: 44px——它会卡死高度，文字多时直接裁剪或换行错乱
真正起作用的是这一整套协同：字体大小 + 内边距 + 最小宽高 + 盒模型。少一个，触控体验就容易掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
