按钮宽度设为50%没生效，根本原因是百分比依赖父容器content box宽度，需确保父容器有明确宽度（如width: 100%或100vw），或改用width: 50vw直接基于视口，再配合display: block、box-sizing: border-box及max-width等控制实际表现。
按钮宽度设为50%但没生效？检查父容器宽度
直接写 width: 50% 失效，大概率是父元素（比如 <div> 或 <code>）本身没占满视口。百分比宽度是相对于**直接父容器的 content box 宽度**计算的，不是屏幕宽度。
实操建议：
- 给按钮的父容器加
width: 100%或width: 100vw（更可靠） - 确保父容器没有 padding/margin 挤压内容区，或用
box-sizing: border-box - 如果按钮是块级元素（如
<button></button>默认 inline），先加display: block
用 vw 单位更直接：50vw 就是屏幕一半宽
vw 是 viewport width 的缩写，1vw = 视口宽度的 1%，所以 width: 50vw 不依赖父容器，也不受盒模型干扰，最接近“屏幕一半”的原始需求。
示例：
<button style="width: 50vw; display: block;">点我</button>
注意点：
-
50vw包含滚动条宽度（如果存在），实际可能略窄于“视觉上的一半”，但多数场景可忽略 - 在移动端，
vw会随 orientation 变化自动重算，无需 JS 监听 - IE9+ 支持，基本无兼容问题
Flex 布局下按钮占一半宽？别只靠 flex: 1
如果按钮在 display: flex 容器里，flex: 1 会让它均分剩余空间——但前提是容器里只有它一个子项，或其它子项没占固定宽度。
常见翻车场景：
- 容器里还有文字、图标等其他元素，导致按钮被压缩
- 忘了设
flex-direction: row（默认就是 row，但显式写更稳） - 想让按钮独占一行并宽 50%，应改用
width: 50vw或包裹一层独立 flex 容器
响应式场景下，max-width 防止按钮过宽
单纯 width: 50vw 在大屏设备上可能让按钮太宽（比如桌面端出现超宽按钮）。加 max-width 限制上限更合理：
<button style="width: 50vw; max-width: 300px; display: block;">点我</button>
这样在小屏上保持 50vw，在大屏上最多 300px，体验更可控。
容易被忽略的是：如果同时用了 min-width 和 width: 50vw，且 min-width 更大，那 width 就会被覆盖——百分比值不会强制突破 min-width。
