H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】如何让el-col下的P标签按照这样的情况对齐

<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">手机号:<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>

现在的效果

clipboard.png

期望最终效果

clipboard.png

回答:

用最外层套一个el-form 里面用el-form-item布局、 label-width自己调整 不用写一堆class控制样式 结构清晰一批
<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=">手机号:">
  {{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>

回答:

给p标签设置一个统一的宽度,然后text-align:right

回答:

  <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">
    格式统一啊  这里多写个 col  
    </el-col>
  </el-row>

回答:

姓名,手机号等包裹一层span,这个span设置宽度相等,字体右对齐

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

.user-detail占满剩下的空间,字体左对齐

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

本文地址:H5W3 » 【element-ui】如何让el-col下的P标签按照这样的情况对齐

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址