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>

     

     

  • 相关阅读:
    Centos7 搭建FTP服务
    Mitmproxy 安装
    NET Reflector 8 使用
    web sevice 生成代理类及使用
    WCF 动态生成 不用增加引用两种方式
    oracle 表空间、用户名 相关语句
    恢复24小时之内删除的表及表数据
    pl/sql插入报错
    jquer ajax
    pdf增加水印
  • 原文地址:https://www.cnblogs.com/tong2018/p/14436226.html
Copyright © 2011-2022 走看看