span控制前面的宽度，让后面的保持对齐

效果：

<div>
   <span class="span1">余额：{{vip.balance}}元</span>
   <el-button  type="text" size="mini" @click="openBlanceDialog = true">调整余额</el-button>
</div>
<div>
   <span class="span1">积分：{{vip.integral}}</span>
   <el-button  type="text" size="mini" @click="openIntegralDialog = true">调整积分</el-button>
</div>

在这里直接控制span1的长度有时是不行的

.span1{
    width:200px;
}

使其效果为：
 

注：因为span标签不同于<P>、<div>等标签（p、div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离）

需要对span格式化：display:inline-block;

.span1{
    width:15%;
    display:inline-block;
}

就可以达到上面的效果

 

 

我是小弟，技术问题，请不要喷我。