我是HTML / CSS的新手,并且已经花了好几个小时来漂浮"提交"输入表单字段右侧的按钮。我确定这是一个相对简单的解决方案,我似乎无法弄明白。请帮助:)
我附上了我想要的截图。 layout of subscribe button
.footer-wrapper #mc_embed_signup {
& input {
background-color: #000;
border-radius: 3px;
height: 35px;
border: none;
width: 100%;
}
}

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//methodpgh.us8.list-manage.com/subscribe/post?u=5a5764ee5b831b0dbfd47811f&id=11148dcbc6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address"> <div class="clear submit-btn"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5a5764ee5b831b0dbfd47811f_11148dcbc6" tabindex="-1" value=""></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
&#13;
答案 0 :(得分:1)
当您不希望元素两侧的内容时,可以使用clear="class"
。这个类停止按钮以对齐输入字段的右侧。我确实删除了它,所以它现在正在工作。 :)
.footer-wrapper #mc_embed_signup {
& input {
background-color: #000;
border-radius: 3px;
height: 35px;
border: none;
width: 100%;
}
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//methodpgh.us8.list-manage.com/subscribe/post?u=5a5764ee5b831b0dbfd47811f&id=11148dcbc6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5a5764ee5b831b0dbfd47811f_11148dcbc6" tabindex="-1" value=""></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->