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 に答える