Question

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

演示：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，因为您不需要指定它两次。

响应式CSS中重叠的字段

1 个答案: