如何在 Mailchimp 嵌入表单中使订阅按钮与输入框位于同一行

Question

现在，我有了它，所以订阅按钮和输入 email 的字段在不同的行上，按钮尺寸很小，字段和按钮之间的间距很尴尬。 我想通过将 email 的按钮和输入字段放在同一行来解决这些问题。 如果您可以添加/删除需要为此做的任何事情，我将非常感激：

我的这个 Mailchimp 嵌入表单的代码现在是这样的：

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#ce3939; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px; color: white}
h2 {color: white;}
   #mc-embedded-subscribe { background-color: #930e0e !important; }
#mc-embedded-subscribe:hover { background-color:#ce3939 !important; }
</style>
<div id="mc_embed_signup">
<form action="https://pghcitypaper.us13.list-manage.com/subscribe/post?u=7bf7a7c4fa696150853fb01ba&amp;id=36c5a7a88b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
  
    <h2>Subscribe to our newsletter (or else)!</h2>

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div hidden="true"><input type="hidden" name="tags" value="118"></div>
    <div id="mce-responses">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- 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_7bf7a7c4fa696150853fb01ba_36c5a7a88b" tabindex="-1" value=""></div>
   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Answer 1

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#ce3939; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px; color: white}
h2 {color: white;}
   #mc-embedded-subscribe { background-color: #930e0e !important; width: auto !important; margin: 0 0 0 20px !important; padding: 0 20px !important;}
#mc-embedded-subscribe:hover { background-color:#ce3939 !important; }
.new{display: flex; align-items: center;}
</style>
<div id="mc_embed_signup">
<form action="https://pghcitypaper.us13.list-manage.com/subscribe/post?u=7bf7a7c4fa696150853fb01ba&amp;id=36c5a7a88b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
  
    <h2>Subscribe to our newsletter (or else)!</h2>

<div class="mc-field-group">
    <div class="new">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
</div>
<div hidden="true"><input type="hidden" name="tags" value="118"></div>
    <div id="mce-responses">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- 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_7bf7a7c4fa696150853fb01ba_36c5a7a88b" tabindex="-1" value=""></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->