如何在某些文本的右侧显示评分图标

Question

我有一个超自然现象现场，每个调查撰写的内容都具有评级。 在这种情况下，我的客户想要使用头骨（并不是真的很重要）。 该站点地址是：

http://theripfiles.tv/j3upgrade/index.php/case-files/season-1

我需要显示短语“ PAL Rating：”，并在其右侧显示1到5个骷髅图标。

我将我正在使用的图像附加到上面的网站页面上。

图像尺寸：宽度：102像素高度135像素5行图标高度27像素顶部行有5个图标。 底行有1个图标。

这是我到目前为止的内容：

.pal-rating-static 
{
    background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
    width: 102px;
    height: 27px;
    display: block;
}

.pal-rating-5 { background-position: 0 0; }
.pal-rating-4 { background-position: -27px 0; }
.pal-rating-3 { background-position: -54px 0; }
.pal-rating-2 { background-position: -81px 0; }
.pal-rating-1 { background-position: -108px 0; }

我尝试从这个简单的示例中使用类似的CSS，但似乎不起作用。 我想念什么？

http://www.itsalif.info/content/displaying-star-rating-using-css-sprites

Answer 1

在您的网站上

.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
float: right;
}

更改为

.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: inline-block;
}

Answer 2

我不认为您需要为此背景弄乱

.pal-rating-static {
    background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
    width: 102px;
    height: 27px;
    display: block;
}

如果这是您的栏，其中可见5个“头骨”。 那么您要做的就是在要显示较少的“头骨”时使容器变小

您可以通过为“头骨”的数量添加一个额外的CSS类来做到这一点

所以你最终会得到这样的东西

.pal-rating-static.cat1 {
  width: 20px;
}

.pal-rating-static.cat2 {
  width: 40px;
}

.pal-rating-static.cat3 {
  width: 60px;
}

.pal-rating-static.cat4 {
  width: 80px;
}

希望这可以解决您的问题..小提琴将非常有用