zoukankan      html  css  js  c++  java
  • element分割线el-divider

    element分割线el-divider:

    项目需要使用到竖线,但是排版不是多行的,自定义了样式,使用el-divider的竖线分隔;

    原api地址:https://element.eleme.cn/#/zh-CN/component/divider

    html

    <div class="demo-search-div"> 
              <el-row :gutter="20" style="height:80px;">
                <el-col :span="12" >
                  <div style="display:inline-grid">
                    <span class="spd-info">采购计划单号</span>
                    <span class="spd-info">制单人</span>
                    <span class="spd-info">备注</span>
                  </div>
                  <el-divider direction="vertical" content-position="center"/>
                  <div style="display:inline-grid">
                    <span class="spd-info">采购计划单号</span>
                    <span class="spd-info">制单人</span>
                    <span class="spd-info">备注</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div style="display:inline-grid">
                    <span class="spd-info">采购院区</span>
                    <span class="spd-info">制单时间</span>
                  </div>
                  <el-divider direction="vertical" content-position="center"/>
                  <div style="display:inline-grid">
                    <span class="spd-info">采购院区</span>
                    <span class="spd-info">制单时间</span>
                  </div>
                </el-col>
              </el-row>
            </div>

    css

    <style scoped>
    .demo-search-div >>> .el-divider--vertical{
        height: 80px;
        vertical-align: text-top;
    }
    .spd-info{
      padding:3px 0;
    }
    </style>

     

     

  • 相关阅读:
    Kaka's Matrix Travels
    Cable TV Network
    LightOJ 1137
    SPOJ AMR11E Distinct Primes 基础数论
    HDU 5533Dancing Stars on Me 基础几何
    POJ 1014 / HDU 1059 Dividing 多重背包+二进制分解
    vijos 1180 选课 树形DP
    vijos 1313 金明的预算方案 树形DP
    LightOJ 1062
    vijos 1464 积木游戏 DP
  • 原文地址:https://www.cnblogs.com/tong2018/p/14436226.html
Copyright © 2011-2022 走看看