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

Question

我希望从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-->

Answer 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>

Answer 2

只需将以下CSS添加到您的<style>代码中：

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

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