css - 造型邮件黑猩猩形式

Question

我的网站顶部有一个电子邮件选项形式的 Mail Chimp，我无法更改它的大小。我希望订阅按钮与电子邮件字段位于同一行。我做错了什么吗？

这是我的表单代码:

<div id="mc_embed_signup">
<form action="//gleefulthings.us12.list-manage.com/subscribe/post?u=0277df98c0e296a094149262c&amp;id=87ac16e6a6" 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="your email address" name="EMAIL" class="email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</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_0277df98c0e296a094149262c_87ac16e6a6" tabindex="-1" value=""></div>

    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

这是我的 CSS:

<!-- Defines how wide the opt-in will be and centers everything -->
#mc_embed_signup {
    width: 880px;
    margin: auto auto !important;
}

<!-- Moves the form to the left and sets the width -->
#mc_embed_signup input.email {
    float: left !important;
    width: 700px !important;
}

<!-- Defines the height of the div surrounding the form -->
#mc_embed_signup .mc-field-group {
    min-height: 20px !important;
}

<!-- Moves the button to the right, removes the rounded corners, pushes the button up 45px -->
#mc_embed_signup input.button {
    background: #bbcf14 !important;
    color: #fff;
    font-weight: 600;
    display: inline-block !important;
    border-radius: 0px !important;
    float: right !important;
    margin-top: -45px;
}

这是我的测试站点的链接:http://gleefulthings.com/WPtestblog/ .任何帮助深表感谢!我一直在谷歌搜索，但无法弄清楚为什么它不起作用。

Answer 1

  input[type="button"], input[type="reset"], input[type="submit"], .button 

{

    background-color: #111;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 300;
    padding: 16px 24px;
    text-transform: uppercase;
    width: 140px;
    float: right;
    height: 52px;
}

#mce-EMAIL
 {
    width: 89.9%;
    float: left;
}

亲爱的 friend ，我正在在线编辑您的网站作为我的检查元素 Chrome 工具，它工作正常。 enter image description here这是将 CSS 应用到您的网站后的屏幕截图。

还有什么问题可以随时联系我。