根源是浏览器将input和select默认视为有固有宽度的内联元素，即使父容器缩至100%，仍按UA样式（如Chrome约130px）渲染而溢出；需同时满足display:block、box-sizing:border-box及父容器宽度可计算三条件。
input 和 select 宽度在移动端不撑满的根源
不是 CSS 写得不够多，而是浏览器默认把 <input> 和 <select> 当作“有固有宽度”的内联元素处理——哪怕父 <td> 或 <div> 已缩到 100%，它们仍按 UA 样式（如 Chrome 的 ~130px）渲染，直接溢出容器。你看到的横向滚动条，基本就是这个原因。
让 input/select 真正 width: 100% 的硬性条件
只写 width: 100% 不够，必须同时满足三项：
-
display: block或display: inline-block（<input>默认是inline，不响应 width/height） -
box-sizing: border-box（否则 padding/border 会额外撑宽） - 父容器本身宽度可计算（比如
<td>在table-layout: auto下若没内容撑开，100% 也无意义）
推荐统一加类名后集中控制：
.form-control {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
font-size: 16px; /* 防 iOS 自动放大 */
}
表格中 <input> 撑不满 <td> 怎么办
表格单元格本身不自动分配剩余空间，尤其在小屏下 <td> 可能被内容（如长 label）撑宽，导致其他列被压缩甚至换行错乱。解决方法不是调 <input>，而是约束表格行为：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed，让列宽由<col>或第一行决定 - 为每列显式设
<col width="*">或用 CSScol:nth-child(1) { width: 30% } - 确保
<td>内没有未包裹的长文本或固定宽元素干扰布局
否则即使 <input class="form-control"> 写对了，也会因父 <td> 实际宽度远小于 100% 而失效。
移动端触摸体验的隐藏坑
撑满宽度只是第一步，用户真正操作时还可能遇到：
- 软键盘弹出后页面被顶起、输入框不可见：给
<input>加scrollIntoView({ behavior: 'smooth', block: 'nearest' })在focus时触发 - 点击热区太小：iOS/Android 要求最小触控面积 ≥ 44×44px，
height: 40px+padding: 4px才达标 - 字体过小触发 Safari 自动缩放：必须设
font-size: 16px，哪怕设计稿是 14px
这些和宽度无关，但缺一不可——宽度撑开了，用户却点不到、看不见、输不了，等于白做。
