Question

我正在处理一个响应式网站，我遇到了表单问题。我有一个外部容器，用于保存表单和提交按钮。当用户的浏览器达到524px或更小时，提交按钮将移动到外部容器下方。在Firefox中一切正常，但当我使用Safari / Chrome时，提交按钮不会移回外部容器。

我在这里有一个问题的例子：yourl.co

这是我的HTML：

<div id="content">
<div id="formContent">
<form id="forms">
    <input id="email" type="email" class="text" placeholder="You@example.com" name="user[email]"/>
    <input id="submit" type="button" class="text" name="user[submit]" value="Notify Me!"/>
</form>
</div>
</div>

这是我的CSS：

#content{
width:100%;
max-width:573px;
height:auto;
margin:45px auto 0 auto;
}
#formContent{
width:99%;
height:56px;
margin:40px auto 0 auto;
background-color:#f6f5f5;
}
#forms{
border:none;
height:51px;
}
#forms #email{
width:75.1%;
height:51px;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #email[type="email"]{
font-family:ubuntu-light;
font-weight:100;
font-size:1.875em;
color:#7baec6;
}
#forms #email[type="email"]:focus{
color:#498cab;
outline:none;
}
#forms #submit{
width:21.5%;
height:47px;
float:right;
margin-right:6px;
margin-top:5px;
border:1px solid #0e5779;
cursor:pointer;
}
@media only screen and (max-width: 524px){
#formContent{
    width:95%;
    max-width:524px;
    margin:40px auto 73px auto;
}
#forms #email{
    width:95%;
    border:none;
    margin-top:2px;
    background-color:#f6f5f5;
    margin-left:6px;
}
#forms #submit{
    width:125px;
    margin:12px auto 0 auto;
    float:none;
    display:block;
}
}

如果您需要更多信息，我很乐意提供。谢谢你的帮助！

Answer 1

如果您将css float: left;添加到#forms #email，一切都会好的。

您可以在此处进行测试：http://jsfiddle.net/witchfinderx/qwnXT/1/

媒体查询在Chrome / Safari中表现得很有趣

1 个答案: