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>

     

     

  • 相关阅读:
    CF140CNew Year Snowmen
    ZR10.1青岛集训三地联考
    CF1228——记一次和紫名失之交臂的CF
    CF1220
    codeforce 382 div2 E —— 树状dp
    codeforce 381 div2
    codeforce 380(div.2)
    Bishops Alliance—— 最大上升子序列
    codeforce 379(div.2)
    模板——BigInteger
  • 原文地址:https://www.cnblogs.com/tong2018/p/14436226.html
Copyright © 2011-2022 走看看