使用css在某些產品圖像上添加折扣標籤的首選方式是什麼？

Question

使用css在某些產品圖像上添加折扣標籤的首選方式是什麼？

我目前的實施過程是這樣http://jsfiddle.net/ANtfG/7/

的Html

<ul> 
    <li class="save_money"> 
     <img src="http://lorempixum.com/200/200/food" /> 
     <span class="twenty-percent" /></span> 
    </li> 
</ul> 

CSS

.save_money{position:relative;float:left;margin:15px;background:yellow;display:inline} 
.save_money img{position:absolute;} 
.twenty-percent{background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png);position:absolute; left:170px; top:-2px; width:45px; height:45px} 

我想在當前的實現，以提高這兩個限制，或者告訴我更好的方式來實現這

1. 如何將折扣標籤對齊到right，而不是使用left:170px？ right:0 不起作用。並且產品圖像的寬度可以在某個時候改變 然後left:170px將不會靈活到寬度。
2. 我在使用空白span元素進行標記我想知道如果 還有另一種方法可以做到這一點。爲什麼我使用span而不是<img>，因爲我的 有不同的標籤，可獲得20％，30％和40％的折扣。所以我想，而不是使用 它<img>將BEGOOD添加與類跨度像 .twenty-percent，.thirty-percent，.forty-prcent

Answer 1

如何對齊折扣標籤以對，不使用左：170像素？右：0 不起作用。並且產品圖像的寬度可以隨時改變，然後 left：170px將不會靈活到寬度。

使用right: -15px。這樣，當您調整寬度時，「折扣標籤」仍將正確定位。 必須刪除，因爲li沒有寬度或高度。我添加了display: block以刪除由於img爲display: inline而導致img下的黃色空間的~4px。

參見：http://jsfiddle.net/thirtydot/ANtfG/9/

我使用的標記一個空白的span元素，我想知道，如果 有另一種方式來做到這一點。爲什麼我使用跨度，因爲我 有不同的標籤20％，30％，40％的折扣。所以我想，而不是使用 會BEGOOD添加一個跨度像 .twenty％的，.thirty％的，.forty-prcent

這很好類。唯一的其他選擇是省略span並使用:before - 但當然，這在IE7等較舊的瀏覽器中不起作用（並且由於IE8錯誤，它在IE8中不起作用）。

參見：http://jsfiddle.net/thirtydot/ANtfG/11/

---

你應該解決這個問題：

<span class="twenty-percent" /></span> 

這樣：

<span class="twenty-percent"></span> 

Answer 2

的主要問題，爲什麼right: 0px;（或者甚至right: -20px;）止跌沒有工作，是因爲你給了img絕對的位置。

正因爲如此，周圍的li元素沒有得到相同的寬度爲您的形象;因此-20％跨度被「錯誤地」定位（也許不同的是更好的詞）。 通過簡單地從IMG取出position:absolute，並與right: -20px;你得到大致相同的結果替換left: 170px;，但將沿着與圖像大小:)正確調整。

Answer 3

@jitendra; ycheck這個小提琴http://jsfiddle.net/sandeep/ANtfG/10/right:-15px是作品，但你的li不採取width & height您img標籤，因爲它是absolute position。所以，從你的img標籤