如何使用嵌入式 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;
}