Styling Mail Chimp Form

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/. Любая помощь высоко ценится! Я был Googling и не могу понять, почему он не работает.

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

Дорогой друг, я редактировать свой сайт в Интернете, как мой инспектировать элемент инструмента Chrome, он отлично работает. enter image description here Это снимок экрана после применения CSS на ваш сайт.

У вас возникли проблемы со мной.