我写了一些css代码,在桌面上看起来都很好,但在移动的上一切都很好,除了订阅按钮,它最终不是在表格的底部,而是在多项选择题的底线。
.vertical-center {
margin: 0;
position: relative;
top: 65%;
left: 35%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (max-width: 992px){
#mcemail {
width: 100%;
}
}
<div class="container" id="mcemail">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
<label>First Name</label>
<input type="text" name="FNAME" placeholder="first name"
required="">
</p>
<p>
<label>Last Name</label>
<input type="text" name="LNAME" placeholder="last name"
required="">
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
<label>Email address:
<input type="email" name="EMAIL" placeholder="Your email address" required />
</label>
</p>
<p>
<label>Which List to signup for</label>
<label>
<input name="_mc4wp_lists[]" type="checkbox" value="Cotacachi"> <span>Cotacachi</span>
</label>
<input name="_mc4wp_lists[]" type="checkbox" value="Quito"> <span>Quito</span>
</label>
<label>
<label>
<input name="_mc4wp_lists[]" type="checkbox" value="Delivery (Cuenca, Olon, Manta, Puerto Lopez, Puerto Cayo, Bahia, Crucita, Ayampe)"> <span>Delivery (Cuenca, Olon, Manta, Puerto Lopez, Puerto Cayo, Bahia, Crucita, Ayampe)</span>
</label>
</p>
</div>
</div>
</div>
<div class="vertical-center">
<input type="submit" id="mc-subscribe" value="Subscribe">
</div>
1条答案
按热度按时间x7yiwoj41#
试试这个:
我稍微清理了一下HTML,把
<form>
标记放进去,把submit按钮放在form标记里面。