需要CSS支持（位置和悬停效果）？

Question

这是我的订阅表单的Mailchimp代码。我已经根据我的需求进行了定制。

1. 红色按钮显示在下方..但我想将它移到旁边（同一级别）（右侧）电子邮箱中。

2. 以及如何将悬停效果（黑色）给按钮。

我试过所有的尝试，但没有任何工作适合我。希望有人能帮上忙。我是CSS新手。谢谢。提交按钮的悬停

#mailchimp { 
 
    background: #383838; 
 
    color: #ff2727; 
 
    padding: 40px 15px; 
 
} 
 
#mailchimp input { 
 
    border: medium none; 
 
    color: gray; 
 
    font-family: times new roman; 
 
    font-size: 16px; 
 
    font-style: bold; 
 
    margin-bottom: 15px; 
 
    padding: 10px 12px; 
 
    width: 350px; 
 
} 
 
#mailchimp input.email { 
 
    background: #fff; 
 
} 
 
#mailchimp input.name { 
 
    background: #fff; 
 
} 
 
#mailchimp input[type="submit"] { 
 
    background: #ff2727; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 20px; 
 
    width: 40%; 
 
    padding: 8px 0; 
 
} 
 
#mailchimp input[type="submit"]:hover { 
 
    color: #000000; 
 
}

<div id="mailchimp"> 
 
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&amp;id=62317f4783" 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="indicates-required"><span class="asterisk">*</span> indicates required</div> 
 
     <div class="mc-field-group"> 
 
      <input type="email" value="Enter your email" name="EMAIL" SIZE="30" class="required 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_32e8df9557dd399bb3ba2ae61_62317f4783" tabindex="-1" value=""></div> 
 
     <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
 
    </div> 
 
</form> 
 
</div>

Answer 1

您需要给输入和输入按钮的容器赋予固定的大小，然后用100％给输入框并向右浮动按钮，然后它将会在输入框的右侧和下方出现。 添加这些更改。

#mailchimp { 
    width: 400px; // give it a fixed size 
} 
#mailchimp input { 
    width: 100%; //give with 100% to it 
    box-sizing:border-box; 
} 
#mailchimp input[type="submit"] { 
    float: right; 
} 
#mailchimp input[type="submit"]:hover { 
    background-color:black; 
    color: white; 
} 

编辑 如下更改CSS和HTML。

#mailchimp { 
     background: #383838; 
     color: #ff2727; 
     padding: 40px 15px; 
     width: 400px; 
    } 
    #mailchimp input { 
     border: medium none; 
     color: gray; 
     font-family: times new roman; 
     font-size: 16px; 
     font-style: bold; 
     margin-bottom: 15px; 
     padding: 10px 12px; 
     width: 100%; //give with 100% to it 
     box-sizing:border-box; 
    } 
    #mailchimp input.email { 
     background: #fff; 
    } 
    #mailchimp input.name { 
     background: #fff; 
    } 
    .mc-field-group { 
     width: 60%; 
     float: left; 
    } 
    #mailchimp input[type="submit"] { 
     background: #ff2727; 
     color: #fff; 
     cursor: pointer; 
     font-size: 20px; 
     width: 40%; 
     padding: 8px 0; 
     float: right; 
    } 
    #mailchimp input[type="submit"]:hover { 
     background-color:black; 
     color: white; 
    } 

和你的HTML这样

<div id="mailchimp"> 
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&amp;id=62317f4783" 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="indicates-required"><span class="asterisk">*</span> indicates required</div> 
     <div class="mc-field-group"> 
      <input type="email" value="Enter your email" name="EMAIL" SIZE="30" class="required email" id="mce-EMAIL"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
     </div> 
     <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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_32e8df9557dd399bb3ba2ae61_62317f4783" tabindex="-1" value=""></div> 

    </div> 
</form> 
</div> 

Answer 2

更改背景颜色：

#mailchimp input[type="submit"]:hover { 
    background-color: #000000; 
} 

位置提交右侧的按钮：

#mailchimp input[type="submit"] { 
    float: right; 
} 

#mailchimp input.email { 
    float: left; 
} 

见浮动是如何工作的： http://www.w3schools.com/css/css_float.asp

Answer 3

显示地址：块到你的输入，然后浮动：左。

你的悬停是正确的，但你只是将文本颜色改为黑色。将'color：＃000000'更改为'background-color：＃000000'。