根本原因是浏览器ua样式为input/select设min-width（如130px）强制覆盖width:100%，须同时设min-width:0、box-sizing:border-box，并确保父容器有明确宽度参照；表格内还需table-layout:fixed及col/td显式列宽。

输入框在响应式布局中不自适应，根本不是“没加 width: 100%”这么简单——而是浏览器默认的 min-width 和表单控件固有渲染逻辑在作祟。

为什么 width: 100% 却不占满父容器？

多数人加了 width: 100% 还是看到输入框右侧留白或溢出，是因为：input 和 select 在各浏览器 UA 样式中自带 min-width: 130px（Chrome）或类似值，它会强制覆盖 width: 100%，尤其在窄屏下更明显。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 必须显式重置：min-width: 0（比 width: auto 更可靠，兼容性更好）
• box-sizing: border-box 必须加上，否则 padding/border 会让实际宽度超 100%
• 父级 <td> 或 <code><div> 若未设 <code>width 或 max-width，百分比就失去参照系

  input 和 select 的宽度行为差异

  两者都受 UA 默认样式影响，但 select 在部分旧版 Safari 中还会额外加一个不可见的“下拉箭头区域”，导致视觉上右边被截断或撑宽。

  • 统一加 min-width: 0 + width: 100% + box-sizing: border-box
  • 对 select 额外加 appearance: none（配合自定义箭头时）可避免渲染异常
  • 不要用 size 属性控制宽度——它是基于字符数的近似值，响应式下完全失效

  表格内输入框自适应要额外处理什么？

  当 input 放在 <table> 的 <code><td> 里，即使控件本身设了 <code>width: 100%，仍可能因表格默认 table-layout: auto 导致列宽被内容撑开，进而让输入框“看起来没填满”。

  • 表格必须设 style="width: 100%; table-layout: fixed;"
  • 每列需通过 <col width="30%"> 或首行 <th style="width: 30%"> 显式声明宽度 <li><code><td> 内部的 <code>input 才能真正继承该列动态宽度
  • 长文本（如 URL）仍可能突破单元格边界，此时需在 <td> 上加 <code>word-break: break-all 或 overflow-wrap: break-word

    移动端真机测试最容易漏掉的点

    DevTools 模拟器常掩盖两个关键问题：软键盘弹出时视口高度变化、Safari 对 input 的自动缩放（font-size 会触发）。

    • 确保 input 的 font-size ≥ 16px，否则 iOS Safari 会强制放大整个字段，破坏布局
    • 加 viewport meta 标签是前提：<meta name="viewport" content="width=device-width, initial-scale=1">，缺它所有响应式 CSS 都白配
    • 真机横竖屏切换时，检查是否因父容器未设 min-width 或 flex 容器未设 flex-shrink: 0 导致输入框被压缩到不可用