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

Question

这是我用于订阅表单的 Mailchimp 代码。我已经根据我的需要定制了它。

红色按钮出现在下面..但我想把它移到（在同一水平面上）（右边）邮箱旁边。
以及如何为按钮赋予悬停效果（黑色）。

我已经尝试了所有尝试，但没有任何效果。希望，有人可以提供帮助。我是 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

更改鼠标悬停时提交按钮的背景颜色：

#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 2

你需要给输入框容器和输入按钮固定大小，然后给输入框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 3

将 display:block 添加到您的输入中，然后添加 float:left。

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

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

Need support with CSS (position and hover effect)?

javascript

html

css

mailchimp