2

我正在使用 Wordpress 中的登录页面，该页面由两个主要组件组成：

  1. 一个垂直和水平居中的 DIV（用 Jquery 完成）
  2. 一系列带有翻转效果的按钮（用JqueryUI实现）

虽然这两个组件似乎都运行良好，但按钮之间有一个额外的空间，我似乎在 HTML 编辑器中找不到，可以在这里看到。“主站点”、“移动”和“捐赠”按钮之间的空间明显大于标题和第一个按钮之间的空间。

在 Chrome 中使用检查元素，</div>每个按钮的标记后面的行都包含一个" "，我认为这可能是造成额外空间的原因，但我在 Wordpress HTML 编辑器中找不到它。我还下载了一个 WP disable wpautop-type 插件，但它并没有删除空间。

最后，当我将 HTML 和关联的 CSS 粘贴到JSfiddle中时，多余的空间消失了。我假设问题出在 Wordpress 的自动格式设置上。但是，我无法弄清楚添加空间的功能是什么或如何删除它。任何帮助是极大的赞赏！

4

2 回答 2

1

我最终为有问题的按钮添加了一个负的底部边距，它删除/减少了 DIV 之间的空间，使其正好符合我的需要。话虽这么说，如果添加负底部边距是不好的做法，请随时跳到这篇文章中并阻止我！

ShaunOReilly，非常感谢您的帮助和 jsfiddle - 我一定会记住的。

马卡

于 2012-08-29T18:29:36.820 回答
0

按钮之间有一些额外的双引号：

<div id="landing" style="margin-top: -100px; top: 50%; position: absolute; margin-left: -200px; left: 50%; "><div style="font-family: 'serif6_beta_rregular'; font-size: 26pt; color: #ffffff; text-align: center;">Adrienne Adams</div>
    ""
    <div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Main Site</div>
    ""
    ​&lt;div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Mobile</div>​
    ""
    <div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Donate</div>​
</div>

可能是一些换行符之类的。

这个看起来不同：http: //jsfiddle.net/webwarrior/tHwmH/3/

当我添加相同的双引号时，我得到相同的效果：http: //jsfiddle.net/webwarrior/tHwmH/4/

如果你不想花几天时间来弄清楚模板为什么会做它正在做的事情，那么将以下 jQuery 添加到DocumentReady函数中：

jQuery("#landing").parent().append("<div class='temp'><div>");
jQuery(".temp").append(jQuery("#landing div"));
jQuery("#landing").empty();
jQuery("#landing").append(jQuery(".temp div"));
jQuery(".temp").remove();

正如这里所见：http: //jsfiddle.net/webwarrior/tHwmH/18/

于 2012-08-28T04:52:33.920 回答