我有一个 Wordpress 驱动的网站，我的联系表格 7 插件在表格底部添加了大量空白，我不知道为什么答案

【问题标题】：I have a Wordpress driven site, my contact form 7 plugin is adding a ton of whitespace to the bottom of the form and I'm not sure why我有一个 Wordpress 驱动的网站，我的联系表格 7 插件在表格底部添加了大量空白，我不知道为什么
【发布时间】：2014-11-10 19:05:59
【问题描述】：

出于某种奇怪的原因，我使用以下代码将其嵌入到 front-page.php 文件中的联系表 7 插件：

<div id="contact" class="pad-section">
  <div class="container">
    <h1>Contact Us</h1>
    <?php echo do_shortcode('[contact-form-7 id="180" title="Request A Quote"]'); ?>
  </div><!-- container -->
</div><!-- contact -->

正在提交按钮下方添加大量空白。检查代码后，我发现罪魁祸首是

<img class="ajax-loader" src="http://foxpile.net/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">

我不确定如何阻止这种情况，或者为什么会发生这种情况。我试图禁用其他插件，但似乎没有任何效果。我已经在单独的页面上尝试了该表单，它似乎工作正常（您可以单击顶部的 Start Your Project 链接并亲自查看）

样式表联系代码

/* Contact */
#contact { }

#contact .container {
    font-size: 12px;
}

【问题讨论】：

标签： jquery css wordpress plugins contact-form-7

【解决方案1】：

这是我认为的问题：

media="all"
.pad-section img {
   width: 100%;
}

我在 DOM 中使用 inspect 元素禁用了它，它修复了额外的填充，所以我将该值设置为“none”或完全删除“.pad-section img”类。

media="all"
.pad-section img {
   width: none;
}

或者删除类。试一试。

【讨论】：

【解决方案2】：

您能告诉我们联系表单的 CSS 代码吗？它是可能在 CSS 中。我猜想在一些地方有很多填充物。看看你是否能找到类似的东西：padding: ...px; 或 padding-left: ...px;（类似的东西）。然后尝试使数字更低。前任。如果是 300px，试着把它变成 50px，看看会发生什么！

（当我输入 ...，对于 ...px 我的意思是一个值 + px ex 13px）

【讨论】：