屏幕缩小时输入框溢出父div的响应式适配问题求助

问题根源 #

1. 按钮.btn1设置固定宽度510px，小屏幕下直接超出父容器范围
2. .left的CSS存在重复定义（两次display:flex、flex-direction），导致布局计算混乱
3. 输入框.form__field未做宽度限制，无法随父容器收缩
4. 未设置全局box-sizing:border-box，元素的padding/margin会额外撑开宽度，引发布局溢出
5. 缺少移动端视口配置，移动端浏览器无法正确适配屏幕尺寸

修复步骤 #

• 清理重复CSS：删除.left中重复的display:flex和flex-direction属性，保留flex-direction:column即可
• 响应式按钮：将.btn1的固定宽度改为width:100%; max-width:510px，既保留大屏下的宽度上限，又能在小屏幕自动收缩
• 输入框适配：给.form__field添加width:100%; max-width:100%，让输入框完全适配父容器宽度
• 全局盒模型设置：添加全局CSS规则* { box-sizing: border-box; }，确保元素的padding和border不会超出设定宽度
• 添加视口标签：在HTML头部加入<meta name="viewport" content="width=device-width, initial-scale=1.0">，保证移动端正常渲染
• 统一边距：调整.left的左右margin为一致值，避免属性冲突

完整修复代码 #

CSS部分

/* 全局盒模型设置，避免宽度溢出 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.footer-main {
  margin-top: 100px;
  width: 100%;
  background-color: #faf7f5;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.45);
  /* 确保父容器包裹子元素，避免内容超出背景 */
  padding-bottom: 50px;
}

.left {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  margin-left: 8.3%;
  margin-right: 8.3%;
  max-width: 100%;
}

/* 输入框样式适配 */
.form__group.field {
  margin-top: 20px;
}

.form__field {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.btn1 {
  color: #fff;
  background-color: #ec2626;
  height: 61px;
  width: 100%;
  max-width: 510px;
  border: 0;
  border-radius: 15px;
  margin-top: 30px;
  cursor: pointer;
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 添加视口标签，适配移动端 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Contact</title>
  <link rel="stylesheet" href="your-css-file.css">
</head>
<body>
  <div class="footer-main">
    <div class="left">
      <div class="top">Contact Us</div>

      <div class="form__group field">
        <input type="text" class="form__field" placeholder="Name" name="name" id="name" required />
        <label for="name" class="form__label">Name</label>
      </div>

      <div class="form__group field">
        <input type="email" class="form__field" placeholder="E-mail" name="E-mail" id="E-mail" required />
        <label for="E-mail" class="form__label">E-mail</label>
      </div>

      <div class="form__group field">
        <input type="text" class="form__field" placeholder="Message" name="Message" id="Message" required />
        <label for="Message" class="form__label">Message</label>
      </div>

      <button class="btn1" type="button">Submit</button>
    </div>
  </div>
</body>
</html>

额外说明 #

• 给.footer-main添加padding-bottom是为了保证按钮和输入框不会超出背景区域
• 全局重置margin:0; padding:0可以避免浏览器默认样式带来的布局偏差
• 输入框的type属性修正为text和email，符合HTML语义化规范

内容的提问来源于stack exchange，提问作者Ayush Kumar