
css代码实现如下:
第一种方案:
.oldprice .label{text-decoration: line-through;overflow:hidden;text-align: justify;text-align-last:justify;text-justify:inter-ideograph(IE);-moz-text-align-last:justify;//兼容FF低版本}
.oldprice .label:after{display:inline-block;content:'';overflow:hidden;width:100%;height:0;}
.active-lists .nowprice{white-space:nowrap;}
.active-lists .nowprice .label{background:#ff6600;color:#fff;text-align:center;border-radius:1em;}
.active-lists .nowprice .points{color:#ff6600;}
<div class="info flex_1">
<h2>必胜客 50元代金券</h2>
<p class="oldprice"><label class="label">原价</label> 50元</p>
<p class="nowprice"><label class="label">首单价</label> <span class="points">200积分</span>+20元 </p>
</div>
第二种方案:
.oldprice .label{text-decoration: line-through;overflow:hidden;text-align: justify;text-align-last:justify;text-justify:inter-ideograph(IE);-moz-text-align-last:justify;//兼容FF低版本}
第二种方案:
.oldprice .label{text-decoration: line-through;overflow:hidden;text-align: justify;text-align-last:justify;text-justify:inter-ideograph(IE);-moz-text-align-last:justify;//兼容FF低版本}
.oldprice .label > span{display:inline-block;padding-left:100%;}
注:在实现两端对文齐的label,它的父级元素,不要设置white-space:nowrap,不然效果失效!
.active-lists .nowprice{white-space:nowrap;}
.active-lists .nowprice .label{background:#ff6600;color:#fff;text-align:center;border-radius:1em;}
.active-lists .nowprice .points{color:#ff6600;}
<div class="info flex_1">
<h2>必胜客 50元代金券</h2>
<p class="oldprice"><label class="label">原价<span></span></label> 50元</p>
<p class="nowprice"><label class="label">首单价</label> <span class="points">200积分</span>+20元 </p>
</div>
转载请注明:前端录»css实现文本两端对齐