响应式表单元素设计：解决输入框与按钮布局错位问题

<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>
        <input class="row1" type="text" placeholder="Name" required>
        <input class="row1" type="text" placeholder="Phone">
      </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>

.row1 {
  /* ...其他样式... */
  width: 230px; /* 固定宽度 */
}

.row2 {
  /* ...其他样式... */
  width: 490px; /* 固定宽度 */
  float: right; /* 浮动 */
}

.row3 {
  /* ...其他样式... */
  width: 490px; /* 固定宽度 */
  float: right; /* 浮动 */
}

.row4 {
  /* ...其他样式... */
  float: right; /* 按钮浮动 */
  padding-right: 192px;
  padding-left: 192px;
  margin-top: 140px;
  margin-right: -500px; /* 负外边距 */
}

/* 保持原有样式，适用于宽屏 */
body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

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

.container {
  overflow: hidden;
  margin: auto;
}

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

.place-name {
  text-align: center;
  padding-right: 200px;
}

.row1 {
  font-size: 15px;
  margin-left: 20px;
  width: 230px;
  height: 30px;
  border-style: groove;
  border-radius: 3px;
}

.row2 {
  margin-top: 15px;
  border-radius: 3px;
  font-size: 15px;
  height: 30px;
  width: 490px;
  float: right;
  border-style: groove;
}

.row3 {
  margin-top: 15px;
  border-radius: 3px;
  border-style: groove;
  font-size: 15px;
  height: 100px;
  width: 490px;
  float: right;
}

#contact-input {
  margin-left: 50px;
  border-radius: 3px;
}

.row4 {
  font-weight: 10;
  border-radius: 3px;
  background-color: #00ced1;
  font-size: 20px;
  float: right; /* 默认浮动 */
  padding-right: 192px;
  border-radius: 3px;
  padding-left: 192px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 140px;
  margin-right: -500px;
}

/* 媒体查询：当屏幕最大宽度为 1000px 时应用 */
@media (max-width: 1000px) {
  .row4 {
    float: left; /* 将按钮浮动方向改为左侧 */
    /* 考虑移除或调整负外边距和过大的内边距，以避免在小屏幕下出现问题 */
    margin-right: 0;
    padding-left: 20px; /* 示例调整，可根据实际效果修改 */
    padding-right: 20px; /* 示例调整 */
    width: auto; /* 允许宽度自适应 */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
  }

  /* 同时考虑调整其他浮动元素和固定宽度元素 */
  .row1, .row2, .row3 {
    width: 100%; /* 让输入框宽度自适应 */
    float: none; /* 移除浮动，让它们自然堆叠 */
    margin-left: 0; /* 移除左侧边距 */
    box-sizing: border-box;
  }

  .place-name {
    padding-right: 0; /* 移除右侧内边距 */
    text-align: left; /* 调整文本对齐 */
  }

  #contact-input {
    margin-left: 0; /* 移除左侧外边距 */
    padding: 0 20px; /* 增加左右内边距，防止内容贴边 */
  }
}