表单字段因长标签致小屏对齐异常，求响应式布局解决方案

你的问题出在float布局对内部元素的对齐控制不足，长标签换行后会打乱输入框的位置。改用Flexbox布局可以轻松实现你要的效果，以下是修改后的代码：

修改后的CSS #

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1.2em;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 45%; /* 宽屏时占约一半宽度，可根据需求调整 */
  padding: 0 0.2em;
}

.form-group label {
  margin-bottom: 0.4em;
}

.form-group input {
  width: 100%;
  box-sizing: border-box; /* 确保padding和border不影响宽度 */
}

/* 小屏适配 */
@media (max-width: 768px) {
  .form-group {
    flex: 1 1 100%; /* 小屏时占满宽度 */
  }
}

修改后的HTML #

<div class="form-row">
  <div class="form-group">
    <label>LABEL HERE</label>
    <input type="text">
  </div>
  <div class="form-group">
    <label>LONG LABEL GOES HERE</label>
    <input type="text">
  </div>
</div>

关键说明 #

• flex-wrap: wrap让表单组在空间不足时自动换行
• 每个.form-group采用垂直Flex布局，标签和输入框各自占一行，不管标签多长，输入框都会在标签下方对齐
• flex: 1 1 45%确保宽屏时两个表单组平分空间，小屏时通过媒体查询切换为100%宽度
• box-sizing: border-box避免输入框的padding或border导致宽度溢出

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