如何为移动设备设置此 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;
  }
}