鍍金池/ 問答/HTML/ 如何讓el-col下的P標(biāo)簽按照這樣的情況對齊

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

<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ī)號:<span class="user-detail">{{userInfo.memberMobile}}</span></p>
                </el-col>
                <el-col :span="4" class="cw-tc">
                  <p class="report-detail-title">卡號:<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">會員等級:<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)在的效果

clipboard.png

期望最終效果

clipboard.png

回答
編輯回答
朕略傻

用最外層套一個el-form 里面用el-form-item布局、 label-width自己調(diào)整 不用寫一堆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="會員姓名:">
  {{{{userInfo.memberName}}}}
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label=">手機(jī)號：">
  {{userInfo.memberMobile}}
</el-form-item>
</el-col>
 <el-col :span="4">
     <el-form-item label="卡號:">
      {{userInfo.cardNo}}
      </el-form-item>
  </el-col>
</el-row>
<el-row>
<el-col :span="4">
    <el-col :span="4">
 <el-form-item label="會員等級:">
      {{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ī)號等包裹一層span，這個span設(shè)置寬度相等，字體右對齊

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

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

.user-detail{display:inline-block;width:50%;text-align:left;}
2018年4月30日 13:53
編輯回答
奧特蛋

給p標(biāo)簽設(shè)置一個統(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">會員等級:<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)一啊  這里多寫個 col  
    </el-col>
  </el-row>
2017年10月10日 18:19