Question

使用css在某些产品图片上添加折扣标记的首选方法是什么？

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}

我想在目前的实施中改进这两项限制，或者告诉我实现这一目标的更好方法

如何将折扣标记与right对齐，而不是使用left:170px？ right:0 不起作用。产品图像的宽度可以随时更改然后left:170px对宽度不灵活。
我在标记中使用空白span元素我想知道是否还有另一种方法可以做到这一点。为什么我使用span而不是<img>因为我有20％，30％，40％折扣的不同标签。所以我想了使用<img>它会想要添加类似的类 .twenty-percent，.thirty-percent，.forty-prcent

Answer 1

如何将折扣标签对齐，而不是使用左：170px？右：0 不起作用。产品图像的宽度可以随时更改 left：170px对宽度不灵活。

使用right: -15px。这样，当您调整宽度时，“折扣标记”仍将正确定位。必须删除position: absolute上的img，因为li没有宽度或高度。我添加了display: block以删除由~4px img引起的img下方的display: inline黄色空间。

请参阅： http://jsfiddle.net/thirtydot/ANtfG/9/

我在标记中使用空白span元素我想知道是否还有另一种方法可以做到这一点。为什么我使用跨度因为我有20％，30％，40％折扣的不同标签。所以我想了使用它会产生类似的类添加跨度 .twenty-percent，.thirty-percent，.forty-prcent

没关系。唯一的另一种选择是省略span并使用:before - 当然，这在IE7等旧浏览器中不起作用（由于IE8，它在IE8中不会起作用） BUG）。

请参阅： 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，然后将left: 170px;替换为right: -20px;即可获得相同的结果，但会使用图像大小调整右侧的大小:)。

Answer 3

@jitendra; ycheck这个小提琴http://jsfiddle.net/sandeep/ANtfG/10/ right:-15px是有效的，但li未被width & height img标记，因为它是absolute position。所以，删除来自position:absolute标记

的img

使用css在某些产品图片上添加折扣标签的首选方法是什么？

3 个答案: