如何使用嵌入式 MailChimp 表单在同一行获取电子邮件字段和提交按钮

Question

我有一个 WordPress 网站，我正在尝试使用带有主题页面构建器的原始 HTML 小部件将 MailChimp 电子邮件注册表单添加到网站的页脚。

我希望电子邮件字段和提交按钮位于同一行，但无论我如何尝试，似乎都无法正常工作。我尝试了这个网站的一些解决方案和我在 Google 上找到的其他一些解决方案，但没有成功。

这是我的表单代码，有人知道我需要在此处添加什么才能使字段和按钮位于同一行吗？

<!-- Begin MailChimp Signup Form -->
<style type="text/css">
#mc_embed_signup{background:#1b1d1f; clear:left; font:14px   Helvetica,Arial,sans-serif; width:100%;}
/* 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&amp;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" 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 btn-icon-left"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

如果它对我正在处理的网站有帮助，请点击此处：http://origamidotme.staging.wpengine.com 表格位于网站底部。

提前感谢您对此的任何帮助，这让我发疯。

Answer 1

按钮被用作块级元素，这是导致问题的原因。请看下面：

#mce-EMAIL {
   display:inline-block;
   float:left;
   margin: 6px 20px 0 0;
}

这将使两个按钮并排放置。

Answer 2

这对我有用，

#news-email{
    width: 80% !important;
}

#news-btn{
    width: 20% !important;
}

如何使用嵌入式 MailChimp 表单在同一行获取电子邮件字段和提交按钮

How to get email field and submit button on same line with embedded MailChimp form

html

css

wordpress

mailchimp