css - 内联块元素被推到下一行

Question

我正在构建一个 WordPress 主题（由 WP SE 告知将这个问题带到这里），但我的页脚小部件区域有问题。除了最近的帖子小部件外，所有小部件似乎都使用我的 CSS 正确布局。它似乎加倍了前一个元素的边距。

小部件的大小为其容器的 33% 的宽度。我给每行三个小部件中的前两个小部件的右边距为 0.5%（33 * 3 + 0.5 * 2 = 100），并使用第 n 个子选择器为每三个小部件提供 0 右填充。

正如您在实时站点的第一行中看到的那样，这对于大多数小部件都非常有效。在第二行，我将“最近的帖子”小部件作为第二个元素。这会在前一个元素的右侧引入额外的边距。

您可以看到 Chrome 开发工具无法解释这个额外的利润。我在这些屏幕截图中突出显示了它和前面的元素以显示它们的边距。

谁能告诉我我可能需要做些什么来纠正这个问题？这会将“最近的帖子”小部件之后的小部件推到下一行并造成很大的混乱。

如果您想查看问题，请访问http://www.kellyshipe.com/。您还将看到上面的行与不同的小部件完美结合。

score 5 · Accepted Answer

您需要摆脱 html 中结束部分标记和下面的开始部分标记之间的空白（删除它或将其注释掉）。

</section>      <section id="recent-posts-2" class="widget widget_recent_entries">

score 4 · Accepted Answer

内联格式上下文中的元素将占用 HTML 中的回车和空格的额外空间。您可以简单地删除空白（对于内联块的任何元素，例如.widget），或者您可以浮动小部件，这样您就不需要弄乱您的标记。

2 回答 2