html重构时碰到的一个恶心的问题

        原图如下：

 

      按理说，这样的页面应该花不了多长时间的，因为做好了一块，下面都是相同的。

      但是我在价格那里，做了很久，都没达到自己想要的效果。就是指“送价值xxx”那里，价格后面有一张背景图。

      那里的结构是<span>送价值<strong>xx</strong>元.....</span>，我所能想到的方法是给strong元素放这个背景图片，但是没得到我要的效果，原因是strong元素是内敛的，它不是块状元素。如果将它变成块状元素，那么整个结构都要改变，可能就是价格前面的要加标签，让它左浮动，然后都左浮动，来达到效果，但是那里的文字是居中对齐的，不是靠左对齐，如果真是靠左对齐的话，我可以利用外层的span，将其display属性变成block，然后用背景图，最后定位一下，就能解决了。

      为了解决这个问题，想了一个多小时，最后想出一个折中的方案，文字还是居中对齐，外层span加背景，考虑到有些定位会有偏差，所以多用了几个class。代码大致如下：

      

span{display:block;background:url(xx.jpg) 20% 0;width:...;height:...;}

        类似的代码写了将近四个，才算解决问题。真是没想法了，不知道大家碰到这样的问题，会如何解决?

转载于:https://www.cnblogs.com/Henry_zp/archive/2010/12/08/1900638.html