响应式 CSS 中的字段重叠

Question

我制作了一个响应式表单，它在 iPad 上看起来不错，但在 iPhone 和安卓手机（小屏幕）中，它的提交与文本字段重叠。我试图修复，但似乎我需要一点帮助。这是我的代码：

演示：http://ithanku.t15.org/

* { 
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
 }

@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
      width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > div > label,
    legend {
    text-align: right;
  }
}

仅供参考：我在此样式表中添加了上述代码：http://ithanku.t15.org/index_files/style_002.css

谢谢

Answer 1

看起来它是一个负边距被应用到包裹“提交”按钮的div：

.gform_footer.top_label {
    float: right;
    margin: -58px 0 0 0;
}

如果你改成

.gform_footer.top_label {
    float: right;
    margin: 0;
}

问题消失了。

您可以将其放在媒体查询中，以确保它不会破坏您的桌面布局：

@media only screen and (max-width:890px) {
    .gform_footer.top_label {
        margin: 0;
    }
}

我省略了float:right，因为您不需要指定两次。