before以及position:absolute;居中效果
<ul class="order">
<li class="active"><a href="1">待付款</a></li>
<li><a href="1">待发货</a></li>
<li><a href="1">待收货</a></li>
</ul>
.order{ width:90%; height:auto; margin:0 auto; overflow:hidden;}
.order li{ float:left; width:32%; height:0.4rem; margin-right:2%; line-height:0.4rem; font-size:0.15rem; text-align:center}
.order li:nth-child(3n){margin-right:0;}
.order li.active{ color:#FF6600; position:relative}
.order li.active a{color:#FF6600; font-weight:bold}
.order li.active:before{content: ""; width:70px; height:2px; background-color:#ff6a00; position:absolute; left:0; right:0; top:0.38rem; margin:0 auto}