2

我正在开发一个响应式网站，但遇到了表单问题。我有一个包含表单和提交按钮的外部容器。当用户的浏览器达到 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;
}
}

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

4

1 回答 1

1

如果您将添加css float: left;到#forms #email所有内容会很好。

你可以在这里测试它：http: //jsfiddle.net/witchfinderx/qwnXT/1/

于 2013-01-12T22:53:16.463 回答