Mailchimp框旁边的按钮 [英] Button next to Mailchimp box

问题描述

本页： http://www.christophelouage.be/category/blog/

我无法将红色的确定按钮放在输入框右侧的侧边栏中。我试了几个小时，没有运气。

I don't succeed in putting the red 'OK' button in the sidebar to the right of the input box. I tried for hours, no luck.

这是小部件的代码：

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://christophelouage.us3.list-manage.com/subscribe/post?u=b665c89ed961eb5c803a3b5b8&amp;id=8b20a6157e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>

<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Vul je e-mailadres in">
</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;"><input type="text" name="b_b665c89ed961eb5c803a3b5b8_8b20a6157e" value=""></div>
    <div class="clear"><input type="submit" value="OK" name="subscribe" id="mc-embedded-subscribe" class="blogbutton"></div>
</form>
</div>

<!--End mc_embed_signup-->

这是我的css：

.mc-field-group {
    margin-top: -30px !important;
}

.mc-field-group label {
    display: none !important;
}

.mc-field-group input {
    width: 62% !important;
    clear: none !important;
    display: inline-block !important;
    float: left !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 1px solid #707070 !important;
    border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
}

#mc_embed_signup form {
    padding: 10px 0 10px 0% !important;
}

.blogbutton {
    width: 20% !important;
    clear: none !important;
    display: inline-block !important;
    float: left !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    background-color: #ad1e1c !important;
    border-radius: 5px !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 16px !important;
    padding: 11px 0px !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.15s ease-in-out !important;
    -webkit-transition: all 0.15s ease-in-out !important;
    -moz-transition: all 0.15s ease-in-out !important;
    -o-transition: all 0.15s ease-in-out !important;
    -ms-transition: all 0.15s ease-in-out !important;
    margin-top: 2px !important;
    margin-left: 5px !important;
    text-transform: none !important;
}

.blogbutton:hover {
    background-color: #373837 !important;
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
}

非常感谢帮助我！
Stefaan

Thanks so much for helping me out! Stefaan

推荐答案

我移动了 .mc-field- group

<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label><br>
    <input name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Vul je e-mailadres in" type="email">
    <input value="OK" name="subscribe" id="mc-embedded-subscribe" class="blogbutton" type="submit">
</div>

额外修改的CSS：

Extra Modified CSS:

.mc-field-group .blogbutton {
    position: absolute;  /*This and the one after is used to style the position of the button, may be removed*/
    top: 14px;
    width: 30% !important;
    padding: 7px !important;
}

.mc-field-group input.required {
    width:70% !important;
    float:left;
    display:inline-block;
}

完成效果

Finished Effect

请修改您自己的代码！我不能对你的疯狂的！重要做任何事情，但你得到我的想法？ ：D

Please modify your own code! I can't do anything with your crazy !importants but you get my idea? :D

这篇关于Mailchimp框旁边的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！