css - 如何在某些文本的右侧显示评级图标

Question

我有一个超自然网站，其中每篇调查报告都有一个评级。在这种情况下，我的客户想使用头骨(这并不重要)。网址是:

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

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

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

图像尺寸:宽度:102px高度 135px5 行高度为 27px 的图标顶行有 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;
}