按钮默认宽度不是100%因为它是inline元素，宽度由内容决定；可靠全宽方案为display: block + width: 100%、flex容器中flex: 1、grid中grid-column: 1 / -1，需配合box-sizing: border-box和margin: 0。

按钮默认宽度为什么不是100%

HTML中 <button></button> 是内联元素（inline），默认宽度由内容决定，不会自动撑满父容器。即使设了 width: 100%，若父元素没有明确宽度或存在 padding/margin/box-sizing 问题，也会失效。

让 button 全宽的三种可靠写法

推荐按优先级选择以下方式，兼顾语义、兼容性和可维护性：

• 给 <button></button> 添加 display: block + width: 100% —— 最直接，适用于大多数现代场景
• 用 display: flex 包裹并设置 flex: 1 —— 适合在 flex 容器中与其他元素对齐（如表单行内多个按钮）
• 改用 display: grid 并设 grid-column: 1 / -1 —— 仅在 grid 布局中有效，不推荐单独为按钮引入 grid

示例（最常用）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<div style="width: 300px;">
  <button style="display: block; width: 100%; margin: 0;">提交</button>
</div>

容易被忽略的坑：padding 和 box-sizing

即使写了 width: 100%，如果父容器有 padding，或按钮自身有默认 padding，就会导致溢出或缩进。关键解决点：

• 始终配合 box-sizing: border-box，否则 padding 会额外增加宽度
• 重置 margin：浏览器对 <button></button> 的默认 margin 不统一（尤其 IE），建议显式设 margin: 0
• 避免父容器使用 text-align: center 误以为能居中撑宽 —— 这只影响内联内容对齐，不影响宽度

在表单中全宽按钮的特殊处理

当 <button></button> 在 <form></form> 内且与 <input> 并列时，不同浏览器对表单控件的默认 box-sizing 和 vertical-align 处理不一致。稳妥做法：

• 统一设 box-sizing: border-box 和 vertical-align: top
• 避免混用 display: inline-block 和 display: block —— 同一行内元素类型不一致极易引发高度错位
• 若用 CSS 框架（如 Bootstrap），优先用其 btn-block 类而非手写样式，避免与框架 reset 冲突

真正卡住人的往往不是“怎么写”，而是没意识到按钮的默认 display 是 inline，以及没检查父容器是否设置了 max-width 或 overflow: hidden 截断了渲染。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！