WooCommerce 产品未在网格中显示答案

【问题标题】：WooCommerce Products Not Displaying in GridWooCommerce 产品未在网格中显示
【发布时间】：2026-01-20 19:20:03
【问题描述】：

我正在将 WooCommerce 与尚未编写为与插件兼容的 WordPress 主题一起使用。在大多数情况下，我的 CSS 工作正常，因此商店看起来还不错，但我遇到了麻烦。出于某种原因，当我进入一个产品类别时，它们会彼此重叠显示，而不是在网格中或并排显示。我疯了，试图弄清楚如何解决这个问题，但失败了。

页面：http://urbexploration.ca/product-category/sanatoriums/

一开始我发现每个

(product)的右边都有很大的margin，所以我用margin-right: 0;但它们仍然没有漂浮在网格中。如果需要任何代码，请告诉我。我一直在尝试定位具有“产品”类的标签。是“产品”。

我试过了

.products li, .product{ float: left !important; margin-right: 0 !important; }

ul 标签似乎填充了它应该使用谷歌浏览器开发工具的区域，并且 li 现在大小合适（我认为）但它仍然不浮动？或者它是浮动的，我错过了其他东西。

明确：两者；按照建议从 .excerpt 类中删除，这似乎可以正确浮动它们。

【问题讨论】：

“它们仍然没有在网格中左浮动。”你在使用浮动属性吗？您应该发布到目前为止您尝试过的内容。
使用 Firebug 或 Chrome 的开发工具检查元素的样式规则。提示：查看.excerpt的主题样式
我试过 .products li, .product{ float: left !important; margin-right: 0 !important; ul 标签似乎填充了它应该使用 Google Chrome 开发人员工具的区域，并且 li 现在的大小正确（我认为）但它仍然没有浮动？或者它可能是浮动的，我错过了其他东西。
编辑您的问题... cmets 中的代码是一场灾难。并检查.excerpt 类。您的主题是在您尝试浮动的同一个 div 中添加 clear: both （woocommerce 默认情况下会浮动它，因此您不需要为此 add 代码，您只需要撤消什么你的主题在那里）。
我明白你的意思了！谢谢！

标签： css wordpress woocommerce

【解决方案1】：

做出自己的回答：

li.product.excerpt { clear: none; }

将是一个好的开始。双类选择器应确保规则比有问题的.excerpt 类本身更具体。

【讨论】：