如何为移动设备设计此MailChimp表单

Question

希望你一切都好！

我刚刚为我的MailChimp帐户中的网站添加了一个注册表格。我想要它

a）在一行上显示"您的电子邮件"文本框和"订阅"按钮b）在手机上做同样的操作，但调整尺寸很好c）最好在底部有一些填充物，因此它不会触及Div的底部。

这是HTML。让我知道您是否需要其他任何东西！：

                        <!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//scottdaviesdesign.us15.list-manage.com/subscribe/post?u=6a0182b1b060f7307996ee031&amp;id=26cb77a478" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                   <div id="mc_embed_signup_scroll">
                  <div class="mc-field-group">  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email"></div>
                <!--</div>-->
                    <div id="mce-responses" class="clear">
                        <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_6a0182b1b060f7307996ee031_26cb77a478" tabindex="-1" value=""></div>
                    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="mailchimpbutton"></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';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
                <!--End mc_embed_signup-->

我已经尝试了几次尝试，根本无法做到！

预先感谢！斯科特

Answer 1

更新：https://jsfiddle.net/sqmjstw0/4

这是您想要的吗？演示：https：//jsfiddle.net/sqmjstw0/调整窗口大小以查看不同的窗口。

input[type=email] {
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
}
input[type=submit] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 14px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .clear {
    display: inline-block;
  }
  .mc-field-group {
    display: inline-block;
  }
}