将 MailChimp 输入和订阅按钮放在同一行答案

【问题标题】：Put MailChimp input and subscribe button on same line将 MailChimp 输入和订阅按钮放在同一行
【发布时间】：2018-03-11 19:38:08
【问题描述】：

我希望从 MailChimp 获取此电子邮件订阅表单，使其全部显示在一条水平线上。这是它现在的样子：

我希望措辞能够显示当前的状态，并且电子邮件的输入字段和订阅按钮都在同一行。

这是我目前使用的代码：

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#546C7C; clear:left; font:14px Helvetica,Arial,sans-serif;  width:300px; color: #fff;}
    /* 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="//Gaylebrickman.us15.list-manage.com/subscribe/post?u=48a6b6c222ef150a6559c63df&amp;id=bf44114a3d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <label for="mce-EMAIL">For Mindfulness Events and Tips</label>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" 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_48a6b6c222ef150a6559c63df_bf44114a3d" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

【问题讨论】：

尝试删除具有清晰类的 div 并查看它是否修复它。我有一种感觉，明确的是把它放在一个新的线上。如果它不让我知道。

标签： html css mailchimp

【解决方案1】：

您只需将<div id="mc_embed_signup_scroll"> 移至<label for="mce-EMAIL">For Mindfulness Events and Tips</label> 下方即可。

然后你必须在代码的任何地方添加这个：

<style>
    #mc_embed_signup_scroll {display: inline}
</style>

【讨论】：

否则一切都保持不变。如果仍有错误，请告诉我
block inline 不是有效的 CSS。

【解决方案2】：

只需将以下 CSS 添加到您的 <style> 标签：

#mc_embed_signup input.email,
#mc_embed_signup input.button {
    display: inline-block;
}

外部样式表将这两个元素的display 属性设置为block，因此这将覆盖它并将它们放在同一行。

【讨论】：