单品星级评价失位答案

【问题标题】：Single product star rating reivews out of position单品星级评价失位
【发布时间】：2014-04-28 02:05:52
【问题描述】：

我最近更改了我的代码，使类别页面上的星级评分向左浮动，但在单个产品评论上，评分是随机浮动的。

我用来在this页面上重新定位星星的css是：

.star-rating {
position: absolute !important;
margin-left: 25px !important;
bottom: 0px;
float: left;
}

ul.products .star-rating
{
margin: 1.5em auto;
}

如果您向下滚动到this 页面的底部，您会看到有两个随机星级评分浮动，一个在双线上方和评论下方。以及页脚上方的其他星级。希望能帮到你，谢谢！！

【问题讨论】：

标签： css comments woocommerce rating-system

【解决方案1】：

您给出星级绝对位置，但位置相对最近的容器是#comment 容器。如果您给出相对于 .comment-text 的位置，我想这就是您想要的位置？

【讨论】：

我给出了绝对星级来定位存档页面上的星星。评论文本使顶部的星星看起来更好，但页面底部仍然有另一个浮动。
你希望它出现在哪里？我猜你想添加相对于 woocommerce-product-rating 容器的位置，并调整你的星星的位置
当我将位置更改为相对位置时，它会出现在我想要的位置。然而，这也会移动main 页面上的星级，我不希望这些改变。
好。如果是这种情况，您可以在此页面上给星号另一个类名以覆盖 CSS
我将这行代码添加到我的 css 中，它在两个页面上都正确定位了星星。但是，我仍然在底部有那个烦人的星级！代码：.single-product #reviews .star-rating { position: relative !important; }

【解决方案2】：

更改了我的 css 代码，见下文：

li .star-rating {
position: absolute !important;
margin-left: 1.5em !important;
bottom: 0px;
float:left;
}

ul.products .star-rating
{
margin: 1.5em auto;
}    

.single-product #reviews .star-rating {
position: relative !important;
}

【讨论】：