在 Wordpress 中将 Mailchimp 表单实现到我的页脚时，100% 宽度不起作用

Posted 2023-03-24

【中文标题】在 Wordpress 中将 Mailchimp 表单实现到我的页脚时，100% 宽度不起作用

【英文标题】：100% width not working when implementing a Mailchimp form into my footer in Wordpress

【发布时间】：2021-11-17 03:50:09

【问题描述】：

所以我一直在尝试在我的网站上实现 Mailchimp 表单，以便人们可以订阅电子邮件通讯。我正在使用 Wordpress 并尝试通过页脚中的自定义 html 小部件来实现这一点。

宽度：100%；对我不起作用，但它会让我将它与像素值一起使用。当然，我希望能够使用 100% 的宽度，而不必使用像素值。我能够使用 % 值的唯一方法是添加 position:absolute;但随后按钮仅移动到我使用的任何宽度的 60% 左右。我真的被卡住了，只希望电子邮件输入和订阅按钮的宽度为 100%。有人对我有什么建议吗？我觉得这是一个简单的修复，但到目前为止我已经花了几个小时。

它是这样的：

这是当前代码：

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup width:80%; 
position:absolute; 
clear:left;  
font:14px Helvetica,Arial,sans-serif; 

#mc-embedded-subscribe 
    width:100%; 
position:absolute; 
background-color: #94a6bf !important; 

    /* 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="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- 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_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

【问题讨论】：

我认为您的主题或其他插件会干扰您的代码。我刚刚在新的 WP 上使用您的代码重新创建了您的情况，并且电子邮件输入和提交按钮都占据了整个页面的宽度（宽度：100%；）

我该如何解决这个问题？ @Keevstudio

为了帮助我需要现场观看，请发送 url @way245

【参考方案1】：

父 div 也定义了全宽。这对我有用。试试这个。

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    div#mc_embed_signup_scroll 
    width: 100%;

   input#mce-EMAIL 
    width: 100%;
    margin: 10px 0px;
#mc-embedded-subscribe 
    width: 100%;
    background-color: #94a6bf !important;


    /* 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="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- 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_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

【参考方案2】：

在按钮上使用样式属性（style="width:100%;"）

<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- 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_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button" style="width:100%;"></div>
    </div>
</form>
</div>