需要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'。