私は自分で解決できないという問題に直面しています。何時間もかけて微調整を行っていますが、問題はまだ残っています。問題は、ブラウザ (Google Chrome の最新バージョン) の画面のサイズを変更すると、チェックボックスが互いの下に表示されず、ボタンが中央に配置されないことです。画像を見る
HTML コード:
<form method="post" action="#" id="newsletterform" data-mailchimp="xtrue">
<div>
<label for="newsletter-name"></label>
<input type="text" placeholder="Name" class="input-field" id="newsletter-name" name="newsletter-name" value="">
</div>
<div>
<label for="newsletter-email"></label>
<input type="text" placeholder="e-mail" class="input-field" id="newsletter-email" name="newsletter-email" value="">
</div>
</br>
<div class="input-check">
<label for="newsletter-checkbox1">
<input type="checkbox" class="input-check" id="newsletter-checkbox" name="newsletter-checkbox" value="check">
<span style="width:120px;margin-top:30px;display:inline-block;clear">some text to check</span>
<input type="checkbox" class="input-check" id="newsletter-checkbox" name="newsletter-checkbox2" value="check">
<span style="width:120px;margin-top:30px;display:inline-block;">some text to check2</span>
</div>
<div>
<a id="button-newsletter" href="#" title="Subscribe now">Subscribe</a>
</form>
</div>
CSS コード:
.container {
position:relative
}
#newsletterform {
float: right;
margin-top: -87px
}
#newsletterform div {
height: 45px;
float: left;
margin: 5px 50px 0px 0px;
}
#newsletterform input {
padding: 10px 18px!important
}
#newsletterform label {
color:#fff;
text-shadow: 1px 1px rgba(0,0,0,.25);
font-size:12px
}
a#button-newsletter {
color:#fff;
padding:11px 32px 10px 32px;
background:#111;
display:block;
float:left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-top: 30px;
margin-left: 78px;
font-size:14px
}
a:hover#button-newsletter {
text-decoration:none;
background:#222
}