我面临一个我无法自己解决的问题,我花了数小时进行调整和调整,但问题仍然存在。问题是在调整我的浏览器屏幕(谷歌浏览器最新版本)的屏幕时,复选框不会显示在彼此下方,而且按钮也没有居中。看图片
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>
代码:
.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
}