Question

希望你好！

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

a）显示＆＃34;您的电子邮件＆＃34;文本框和＆＃34;订阅＆＃34;按钮在一条线上 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;
  }
}

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

1 个答案: