如何讓el-col下的P標(biāo)簽按照這樣的情況對(duì)齊

<div class="report-detail" :data="userInfo">
              <el-row typeof="flex" justify="space-between" >
                <el-col :span="4" class="cw-tc">
                  <p class="report-detail-title">姓名:<span class="user-detail">{{userInfo.memberName}}</span></p>                
                </el-col>
                <el-col :span="4" class="cw-tc">
                  <p class="report-detail-title">手機(jī)號(hào):<span class="user-detail">{{userInfo.memberMobile}}</span></p>
                </el-col>
                <el-col :span="4" class="cw-tc">
                  <p class="report-detail-title">卡號(hào):<span class="user-detail">{{userInfo.cardNo}}</span></p>
                </el-col>
              </el-row>
              <el-row typeof="flex" justify="space-between">
                <el-col :span="4" class="cw-tc">
                  <p class="report-detail-title">會(huì)員等級(jí):<span class="user-detail">{{userInfo.gradeName}}</span></p>
                </el-col>
                <el-col :span="4" class="cw-tc">
                  <p class="report-detail-title">剩余積分:<span class="user-detail">{{userInfo.leftPoints}}</span></p>
                </el-col>
              </el-row>
            </div>

<style lang="less">
.el-table__fixed::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.boder {
  border: 1px solid #dcdcdc;
}
.cw-tc {
  text-align: right;
}
.cw-button {
  width: 300px;
  margin: 100px auto;
}
.report-box {
  padding: 20px 0 10px;
  .userInfo {
    margin-top: 10px;
    margin-left:20px;
    margin-bottom:10px;
  }
  .report-detail-title {
    margin-top: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    color:#333333;
  }
  .report-detail-value {
    font-size: 18px;
    color: #333;
  }
  .user-detail{
    margin:0 20px;
  }
}
</style>

現(xiàn)在的效果

期望最終效果

回答

編輯回答

朕略傻

用最外層套一個(gè)el-form 里面用el-form-item布局、 label-width自己調(diào)整不用寫(xiě)一堆class控制樣式結(jié)構(gòu)清晰一批
<el-form :model="userInfo" label-width="100px">
<el-row typeof="flex" justify="space-between">

<el-col :span="4" class="cw-tc">
<el-form-item label="會(huì)員姓名:">
  {{{{userInfo.memberName}}}}
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label=">手機(jī)號(hào)：">
  {{userInfo.memberMobile}}
</el-form-item>
</el-col>
 <el-col :span="4">
     <el-form-item label="卡號(hào):">
      {{userInfo.cardNo}}
      </el-form-item>
  </el-col>
</el-row>
<el-row>
<el-col :span="4">
    <el-col :span="4">
 <el-form-item label="會(huì)員等級(jí):">
      {{userInfo.gradeName}}
    </el-form-item>
</el-col>
   <el-col :span="4">
    <el-col :span="4">
 <el-form-item label="剩余積分:">
      {{userInfo.leftPoints}}
    </el-form-item>
</el-col>   
</el-row>

</el-form>

2018年2月28日 17:08

編輯回答

哎呦喂

給姓名,手機(jī)號(hào)等包裹一層span，這個(gè)span設(shè)置寬度相等，字體右對(duì)齊

.label{display:inline-block;width:50%;text-align:left;}

.user-detail占滿剩下的空間，字體左對(duì)齊

.user-detail{display:inline-block;width:50%;text-align:left;}

2018年4月30日 13:53

編輯回答

奧特蛋

給p標(biāo)簽設(shè)置一個(gè)統(tǒng)一的寬度，然后text-align:right

2018年3月14日 15:38

編輯回答

網(wǎng)妓

  <el-row typeof="flex" justify="space-between">
    <el-col :span="4" class="cw-tc">
      <p class="report-detail-title">會(huì)員等級(jí):<span class="user-detail">{{userInfo.gradeName}}</span></p>
    </el-col>
    <el-col :span="4" class="cw-tc">
      <p class="report-detail-title">剩余積分:<span class="user-detail">{{userInfo.leftPoints}}</span></p>
    </el-col>
     <el-col :span="4" class="cw-tc">
    格式統(tǒng)一啊  這里多寫(xiě)個(gè) col  
    </el-col>
  </el-row>

2017年10月10日 18:19