button宽度设为100%不生效，因默认为inline元素，需先设display:block或flex；父容器若有padding/border需配合box-sizing:border-box，否则会溢出。

button 宽度设为 100% 不生效？检查 display 类型

默认 button 是 inline 元素，width: 100% 对它无效。必须先改成块级或弹性布局容器才能撑满父级。

• 最简方案：button { display: block; width: 100%; }
• 更现代推荐：button { display: flex; width: 100%; }（兼顾居中文字和兼容性）
• 如果父容器用了 display: flex，子 button 默认不换行，需加 flex: 1 或 width: 100% 才撑满

父容器有 padding 或 border 导致按钮溢出

即使设了 width: 100%，若父容器有 padding 或 border，按钮会超出边界——这是盒模型默认行为。

• 解决方法一（推荐）：给父容器加 box-sizing: border-box，让 padding/border 包含在宽高内
• 解决方法二：给按钮加 box-sizing: border-box 并配合 width: 100%，但仅治标
• 别漏掉 margin: 0 —— 浏览器默认 button 可能带微小外边距

响应式下按钮被截断或换行异常

在移动端或窄屏中，文字过长 + width: 100% 容易触发换行或文字溢出，视觉上像“没撑满”。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 加 white-space: nowrap 防止文字折行
• 配合 overflow: hidden 和 text-overflow: ellipsis（需同时设 display: block）
• 慎用 min-width —— 设太大会在小屏强制横向滚动

Vue/React 中动态渲染按钮时样式失效

框架里按钮是动态插入的，CSS 类可能未及时应用，或被 scoped 样式隔离干扰。

立即学习“前端免费学习笔记（深入）”；

• 检查是否用了 <style scoped></style>，此时需用深度选择器：:deep(button)（Vue）或 button::part(...)（部分组件库）
• React 中若用 CSS-in-JS（如 styled-components），确认样式对象已正确传入 button 组件
• 临时调试：在 DevTools 里手动加 style="width:100%;display:block" 看是否生效，快速定位是样式丢失还是继承问题

实际项目里最容易忽略的是父容器的 box-sizing 和框架对样式的封装层级，这两处卡住时，光调 button 自身样式根本没用。