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}