我在主题站点的页面构建器中使用原始HTML小部件在WordPress网站的页脚中嵌入了MailChimp注册表单。
由于在此站点上获得了一些帮助,我设法在同一行上获得了输入字段和订阅按钮。现在,我只需要删除字段和按钮之间的一些空白区域并将所有内容居中。
这是我网站的链接,该表格位于底部:
http://origamidotme.staging.wpengine.com
这是我的表格的代码:
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
#mc_embed_signup{background:#1b1d1f; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
#mce-EMAIL {display:inline-block; float:left; margin: 6px 20px 0 0;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://origami.us11.list-manage.com/subscribe/post?u=c46543dec276193775d525c9f&id=85cb8a5e0e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" size="100%" placeholder="Your Best Email" required>
<!-- 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_c46543dec276193775d525c9f_85cb8a5e0e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn border-width-0 btn-accent btn-round btn-flat"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
我需要添加些什么来使该按钮更接近字段结尾,然后如何使整个内容居中于页脚?
先谢谢您的帮助。
最佳答案
像这样更新代码:
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
#mc_embed_signup {
background: #1b1d1f;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
width: 100%;
}
#mce-EMAIL {
display: inline-block;
padding: 12px;
}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://origami.us11.list-manage.com/subscribe/post?u=c46543dec276193775d525c9f&id=85cb8a5e0e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" size="100%" placeholder="Your Best Email" required>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn border-width-0 btn-accent btn-round btn-flat">
<!-- 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_c46543dec276193775d525c9f_85cb8a5e0e" tabindex="-1" value=""></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
关于html - 如何调整嵌入式MailChimp表单的位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47434094/