Question

我正在使用Wordpress中的一个着陆页，其中包含两个主要组件：

垂直和水平居中的DIV（使用Jquery完成）
一系列具有翻转效果的按钮（使用JqueryUI完成）

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

在Chrome中使用inspect元素，每个按钮的</div>标记后面的行包含" "，我认为这可能是额外空间的责任，但我无法在Wordpress HTML编辑器。我还下载了一个WP禁用wpautop类型的插件，但它没有删除空间。

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

Answer 1

我最终在相关按钮上添加了一个负底边距，它将DIV之间的空间移除/缩小到我需要的位置。话虽这么说，如果添加负底部边缘是不好的做法，有人可以自由地跳进这个帖子并阻止我！

ShaunOReilly，非常感谢你的帮助和小伙子们 - 我一定会记住这一点。

马卡

Answer 2

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

<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>
    ""
    <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/

DIV之间的额外空间

2 个答案: