本文详解如何通过 css 定位与继承宽度，使搜索表单在图片上实现真正 100% 宽度且随窗口自适应缩放，解决 `.centered` 元素未继承父容器宽度导致搜索框收缩的常见问题。
要实现「全宽响应式搜索框覆盖图片」效果，关键在于两个 CSS 层级的宽度控制：父容器必须显式声明 width: 100%，而绝对定位的子容器（.centered）需通过 width: inherit 主动继承该宽度——否则即使内部 <input> 设置了 width: 100%，它也仅会相对于一个默认为 auto（即内容宽度）的 .centered 计算，导致实际宽度远小于预期。
以下是完整、可直接运行的解决方案：
.container {
width: 100%; /* ✅ 必须显式设置，确保容器撑满父级 */
position: relative;
text-align: center;
color: white;
}
.centered {
width: inherit; /* ✅ 关键！继承 .container 的 100% 宽度 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="text"] {
width: 100%; /* ✅ 相对于 .centered（现为 100%）生效 */
height: 25px;
border: 1px solid #FFFFFF;
text-align: right;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
padding: 3px;
background-color: transparent;
box-sizing: border-box; /* ? 推荐添加：防止 padding/border 溢出 */
}
textarea:focus,
input:focus {
color: #FFFFFF;
}
input,
select,
textarea {
color: #FFFFFF;
}<div class="container">
<img src="ban.png" alt="Background" style="width: 100%; display: block;">
<div class="centered">
<form method="get" action="https://www.google.com/search" target="_blank">
<input
type="text"
name="q"
value="Find more"
onfocus="if(this.value===this.defaultValue) this.value='';"
onblur="if(this.value==='') this.value=this.defaultValue;"
>
<input
type="submit"
style="position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;"
aria-label="Search"
>
<input type="hidden" name="sitesearch" value="mydomain.com">
</form>
</div>
</div>✅ 关键优化说明：
- <img> 添加 display: block 防止底部默认留白；
- 提交按钮改用 opacity: 0 + position: absolute 替代 width/height: 0，更可靠且可访问（配合 aria-label）；
- box-sizing: border-box 确保 padding 和 border 不影响 width: 100% 的最终渲染宽度；
- JavaScript 中使用严格相等 === 避免类型隐式转换隐患。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若 .container 的父元素（如 <body> 或某个 <section>）未设宽度或存在 max-width，.container 的 100% 将受限于其祖先；建议检查外层布局约束；
- 响应式场景下，可对小屏幕补充媒体查询（例如降低 font-size 或 height），但本方案基础结构已天然支持缩放。
此方法不依赖 Flexbox 或 Grid，兼容性极佳（IE9+），同时保持语义清晰与维护友好，是覆盖式搜索组件的稳健实践方案。
