登录信息收集表单：拆分姓名字段后标签居上且整体居中的实现问题

核心问题在于data-form容器未预留标签显示空间，且绝对定位的标签位置计算有误。以下是调整后的代码：

修改后的CSS #

.feedback-data {
  text-align: center;
  position: relative;
  /* top: 12rem; */
}

.name-form {
  display: flex;
  justify-content: center;
  gap: 20px; /* 用gap替代margin，更简洁控制输入框间距 */
}

.data-form {
  position: relative;
  margin: 20px;
  padding-top: 20px; /* 为标签预留显示区域 */
  display: inline-block; /* 让容器宽度适配输入框，保持整体居中 */
}

.data-form > label {
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute;
  top: 5px; /* 调整到输入框上方的固定位置 */
  left: 10px;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}

/* 可选优化：输入框聚焦时缩小标签并改变颜色 */
.data-form > input:focus + label {
  top: 0;
  font-size: 12px;
  color: #007bff;
}

修改后的HTML #

<div class="feedback-data">
  <form action="">
    <div class="name-form">
      <div class="data-form">
        <input type="text" id="firstName" name="firstName" placeholder="名字" autocomplete="off" required>
        <label for="firstName">名字</label>
      </div>

      <div class="data-form">
        <input type="text" id="lastName" name="lastName" placeholder="姓氏" autocomplete="off" required>
        <label for="lastName">姓氏</label>
      </div>
    </div>

    <div class="data-form">
      <input type="email" id="emails" name="email" placeholder="邮箱" autocomplete="off" required>
      <label for="emails">邮箱</label> <!-- 修正原代码中for属性关联错误的问题 -->
    </div>

    <div class="data-form">
      <input type="number" id="phonenumber" name="number" placeholder="手机号" autocomplete="off" required>
      <label for="phonenumber">手机号</label> <!-- 修正原代码中for属性关联错误的问题 -->
    </div>
  </form>
</div>

关键调整说明 #

• 给data-form添加padding-top，避免绝对定位的标签溢出容器
• 调整标签top值为5px，确保稳定显示在输入框上方
• 用gap控制姓名输入框的间距，比margin更精准
• 修正两处label的for属性错误，保证标签与输入框正确关联
• 为data-form设置display: inline-block，让单个输入框容器宽度适配内容，维持整体居中对齐

修改后，姓名的两个输入框会并排显示且整体居中，所有标签都能正确显示在对应输入框上方，同时保留了你原本的过渡动画效果。

内容的提问来源于stack exchange，提问作者Thor The dog