前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

css实现文本两端对齐

html/css
实现如下效果:

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 > span{display:inline-block;padding-left:100%;}
.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>

 
注:在实现两端对文齐的label,它的父级元素,不要设置white-space:nowrap,不然效果失效!


转载请注明:前端录»css实现文本两端对齐