根源是浏览器将input和select默认视为有固有宽度的内联元素，即使父容器缩至100%，仍按ua样式（如chrome约130px）渲染而溢出；需同时满足display:block、box-sizing:border-box及父容器宽度可计算三条件。

input 和 select 宽度在移动端不撑满的根源

不是 CSS 写得不够多，而是浏览器默认把 <input> 和 <select></select> 当作“有固有宽度”的内联元素处理——哪怕父 <td> 或 <code><div> 已缩到 100%，它们仍按 UA 样式（如 Chrome 的 ~130px）渲染，直接溢出容器。你看到的横向滚动条，基本就是这个原因。<h3>让 input/select 真正 width: 100% 的硬性条件</h3> <p>只写 <code>width: 100% 不够，必须同时满足三项：

• display: block 或 display: inline-block（<input> 默认是 inline，不响应 width/height）
• box-sizing: border-box（否则 padding/border 会额外撑宽）
• 父容器本身宽度可计算（比如 <td> 在 <code>table-layout: auto 下若没内容撑开，100% 也无意义）

  推荐统一加类名后集中控制：

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载

  .form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 16px; /* 防 iOS 自动放大 */
  }
  

  表格中 <input> 撑不满 <td> 怎么办<p>表格单元格本身不自动分配剩余空间，尤其在小屏下 <code><td> 可能被内容（如长 label）撑宽，导致其他列被压缩甚至换行错乱。解决方法不是调 <code><input>，而是约束表格行为：

  • 给 <table> 加 <code>table-layout: fixed，让列宽由 <col> 或第一行决定
  • 为每列显式设 <col width="*"> 或用 CSS col:nth-child(1) { width: 30% }
  • 确保 <td> 内没有未包裹的长文本或固定宽元素干扰布局<p>否则即使 <code><input class="form-control"> 写对了，也会因父 <td> 实际宽度远小于 100% 而失效。<h3>移动端触摸体验的隐藏坑</h3> <p>撑满宽度只是第一步，用户真正操作时还可能遇到：</p> <ul> <li>软键盘弹出后页面被顶起、输入框不可见：给 <code><input> 加 scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 在 focus 时触发
  • 点击热区太小：iOS/Android 要求最小触控面积 ≥ 44×44px，height: 40px + padding: 4px 才达标
  • 字体过小触发 Safari 自动缩放：必须设 font-size: 16px，哪怕设计稿是 14px

  这些和宽度无关，但缺一不可——宽度撑开了，用户却点不到、看不见、输不了，等于白做。