如何在屏幕≤520px时将表单label对齐至输入框顶部

你的问题出在媒体查询的选择器错误和样式冲突上，以下是修正方案：

问题分析 #

1. 你用了.fmr类选择器，但HTML中表单容器是id="fmr"，应该用#fmr作为选择器
2. 媒体查询内先设置flex-direction: column，随后又覆盖为flex-direction: row，导致垂直布局的设置失效
3. label的固定宽度在小屏幕下会占用过多空间，需要调整

修正后的CSS媒体查询代码 #

替换你原有的@media (max-width:520px)区块为以下代码：

@media (max-width:520px) {
  #fmr .input_fld{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  #fmr .input_fld > label{
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
    text-align: left;
  }
  #fmr .input_fld input,
  #fmr .input_fld .slgn,
  #fmr .input_fld textarea{
    width: 100%;
  }
}

代码说明 #

• 用#fmr替换.fmr，匹配正确的容器元素
• 设置.input_fld为垂直方向的flex布局，让label和输入框上下排列
• 让label占满整行，清除右侧margin并添加底部间距，保证和输入框的分隔
• 强制输入框、选择器、文本框占满容器宽度，适配小屏幕

修改后，在屏幕宽度≤520px时，label会自动对齐到输入框顶部，实现预期的响应式效果。

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