如何实现网站输入框与按钮的响应式布局 解决小屏偏移问题

• 现有代码使用大量固定像素宽度、固定内边距、负外边距做元素定位：例如输入框写死490px宽度、地址文本固定200px右内边距、提交按钮设置margin-right: -500px强制偏移，屏幕宽度小于1000px时这些固定值无法适配视口宽度，直接导致元素偏移、左侧出现多余留白。
• 依赖float实现元素排列，没有配置小屏下的布局重排规则，浮动元素脱离文档流后很容易出现错位、父容器宽度计算异常的问题。

用flex弹性布局替代浮动定位，宽度采用相对单位适配不同屏幕尺寸，移除所有会造成错位的硬编码负边距，补充小屏断点适配规则，修改后代码如下：

修复后CSS代码 #

body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.topper-header {
  padding-top: 50px;
  text-align: center;
  font-size: 250%;
  font-weight: 300;
  text-decoration: underline cyan;
}

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

#part4 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  padding-bottom: 100px;
}

#contact-input {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.first-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.place-name {
  flex: 1 1 250px;
  text-align: left;
}

.input-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.row1 {
  font-size: 15px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 10px;
  flex: 1 1 200px;
}

.row2 {
  font-size: 15px;
  height: 40px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 10px;
  box-sizing: border-box;
}

.row3 {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 15px;
  min-height: 100px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  resize: vertical;
}

.row4 {
  font-weight: 400;
  border-radius: 3px;
  background-color: #00ced1;
  font-size: 20px;
  border: none;
  width: 100%;
  padding: 12px 0;
  margin-top: 10px;
  color: white;
  cursor: pointer;
}

/* 小屏适配 */
@media (max-width: 999px) {
  .first-row {
    flex-direction: column;
    align-items: stretch;
  }
  .place-name {
    text-align: center;
    margin-bottom: 10px;
  }
  .topper-header {
    font-size: 200%;
  }
}

调整后HTML代码 #

<section id="part4">
  <div class="container">
    <h1 class="topper-header">CONTACT</h1>
    <div id="contact-input">
      <div class="first-row">
        <span class="place-name">Zagatala,Zagatala City,Azerbaijan</span>
        <div class="input-group">
          <input class="row1" type="text" placeholder="Name" required>
          <input class="row1" type="text" placeholder="Phone">
        </div>
      </div>
      <div class="second-row">
        <input class="row2" type="email" placeholder="Email address">
      </div>
      <div class="third-row">
        <textarea class="row3" placeholder="Message"></textarea>
        <button class="row4">CONTACT US</button>
      </div>
    </div>
  </div>
</section>

改动说明 #

• 表单容器设置最大宽度+水平居中，宽度随视口自动适配，不会出现横向溢出
• 移除所有浮动、负边距定位，改用flex布局控制元素排列，大屏下保持原有横向排版，小屏下自动切换纵向排列
• 所有输入框、按钮宽度设为撑满容器，去掉固定像素宽度限制，不会因为视口变窄出现错位
• 给输入框增加内边距优化输入体验，按钮去掉超大固定内边距，宽度和输入框保持一致，视觉上完全居中

内容的提问来源于stack exchange，提问作者Count of Monte Cristo