如何在某些文本的右側顯示評分圖標

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;
}

希望這可以解決您的問題..小提琴將非常有用