css - 如何解决我的 Woocommerce 网站上的行内 block 对齐问题？

Question

尝试处理一些 CSS，我需要一些指导。我在我们的商店页面上显示了产品评论的数量，但评论的数量显示在星级之下。我正在尝试获取要在星级旁边显示的评论数量。对齐方式变得很奇怪。

我尝试了以下代码段:

.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-review-link {
  display:inline-block
  }

评论数量和星级评分并不一致。附上图片。

Website

screenshot

Screenshot 2

Answer 1

如果您无法访问标记，最简单的方法是使用 position: relative 并调整它的最高值:

.woocommerce ul.products li.product .star-rating {
    display:inline-block;
}
.woocommerce ul.products li.product .woocommerce-review-link {
    display:inline-block;
    position: relative;
    top: -8px;
}