如何调整MailChimp表单中“订阅”按钮的位置

时间：2018-10-20 07:41:23

标签： html css

我想在同一行上获取电子邮件输入字段和订阅按钮。

这里是指向我的网站的链接：https://grandcru.coffee

Mailchimp：

    <style type="text/css"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><br />   #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }<br /> /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br />       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br /></style>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="https://coffee.us2.list-manage.com/subscribe/post?u=8b0255d591085d1f5c2356475&amp;id=13270c865d" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">

<input id="mce-EMAIL" class="email" name="EMAIL" required="" type="email" value="" placeholder="email address" />
<!-- 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 tabindex="-1" name="b_8b0255d591085d1f5c2356475_13270c865d" type="text" value="" /></div>
<div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form></div>
<!--End mc_embed_signup-->

2 个答案:

答案 0 :(得分：0)

删除<div class="clear">

最后看起来应该是

<style type="text/css"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><br /> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }<br /> /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br />       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br /></style>
<div id="mc_embed_signup">


<form id="mc-embedded-subscribe-form" class="validate" action="https://coffee.us2.list-manage.com/subscribe/post?u=8b0255d591085d1f5c2356475&amp;id=13270c865d" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
 <div class="col-lg-6">

<div id="mc_embed_signup_scroll">

<input id="mce-EMAIL" class="email" name="EMAIL" required="" type="email" value="" placeholder="email address" />


<div style="position: absolute; left: -5000px;" aria-hidden="true"><input tabindex="-1" name="b_8b0255d591085d1f5c2356475_13270c865d" type="text" value="" /></div>

<input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" />
</div>

</div>
</form>

</div>

答案 1 :(得分：0)

enter image description here尝试在同一类中同时添加输入字段和按钮。

像这样

    <style type="text/css"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><br /> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }<br /> /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br />       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br /></style>
    <div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="https://coffee.us2.list-manage.com/subscribe/post?u=8b0255d591085d1f5c2356475&amp;id=13270c865d" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
    <div id="mc_embed_signup_scroll">

    <input id="mce-EMAIL" class="email" name="EMAIL" required="" type="email" value="" placeholder="email address" /> <!----------HERE------------>

><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" />

<!-------------HERE --------------->
    <!-- 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 tabindex="-1" name="b_8b0255d591085d1f5c2356475_13270c865d" type="text" value="" /></div>
    <div class="clear"</div> <!--- NOT HERE ---------->
    </div>
    </form></div>
    <!--End mc_embed_signup-->
相关问题
最新问题