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

我有一個超自然的網站，每個調查都有一個評分。在這種情況下，我的客戶想要使用頭骨（不是真的很重要）。該網站地址是：如何在某些文字的右側顯示評分圖標

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

我需要顯示短語「PAL評價：」具有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

來源

2014-01-16 Jim MacDiarmid

請添加您的HTML。另外，我想你會發現你得到更多的答案，如果你設置了一個http://jsfiddle.net的例子，你已經嘗試過 – Brad

我不知道該怎麼做。我只是將頁面源複製到該地址？ –

順便說一句，這裏沒有涉及JavaScript。 –

在你的網站，你有

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

來源

2014-01-16 22:45:44 Brad

是啊我搞砸了，忘了在我發佈線程之前在我的CSS中更改圖標名稱。儘管非常感謝你。我絕對更接近我所期待的。 :)我想我只需要爲我的短語「PAL Rating：」和圖標的左邊距制定我的css。 –

我不認爲你需要惹這一個

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

後臺位置

如果這是你的酒吧，5'頭骨'可見。那麼所有你需要做的是使容器小，當你想顯示較少的「頭骨」

您可以通過添加額外的CSS類的NUMER做到「頭骨」

，所以你最終會像這樣的東西

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

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

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

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

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

來源

2014-01-16 22:47:16

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

回答

相關問題