我有一个超自然网站,其中每篇调查报告都有一个评级。在这种情况下,我的客户想使用头骨(这并不重要)。网址是:
http://theripfiles.tv/j3upgrade/index.php/case-files/season-1
我需要显示短语“PAL Rating:”,并在其右侧显示 1 到 5 个骷髅图标。
我将我正在使用的图像附加到上面的网站页面。
图像尺寸: 宽度:102px 高度 135px 5 行高度为 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
最佳答案
在你的网站上你有
.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;
}
关于css - 如何在某些文本的右侧显示评级图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21174224/