Html 如何为移动设备设置此mailchimp表单的样式？

希望你很好

我刚刚在我的网站上为我的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-->

（函数（$）{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）；

我已经试过几次了，但根本就做不好

提前谢谢！ 斯科特更新：

这是你想要的吗？演示：调整窗口大小以查看不同的窗口

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;
  }
}

---

制作你自己的，只需使用Mailchimp表单操作和IDS，我可以管理的表单，这是我正在努力解决的移动应用程序的样式。很抱歉延迟。是的，基本上就是这样-唯一的区别是我希望“订阅”按钮位于“您的电子邮件地址”框的左侧。只需更改html代码中的div-查看更新的答案。