需求:

el-form 每行显示两列,底部按钮居中

问题:

以前的解决办法是: el-col, el-row。但是这里只有一个 el-form-itemlabel 数据是已知的,其余项都是循环得到的,数量不固定,因此不能采用 el-col 方式。

尝试

尝试过 item 左浮动,flex,底部定位,都无法解决。

解决办法

el-form 添加 inline 属性,给每个 item 设置宽度;给底部按钮 flex 布局。

参考链接

http://t.csdn.cn/nrQ0C

思考

  1. 说明 el-form 本身是 block 块级元素;
  2. flex 和 定位的详细内容不是很熟悉,比如 flex:1

el-form 每行显示两列,底部按钮居中的更多相关文章

  1. Element UI Form 每行显示多列,即多个 el-form-item

    Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...

  2. flex一行显示两列(CSS)

    外层display: flex;flex-wrap: wrap; 里层 width:49%

  3. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  4. 如何将文章列表用<li>分两列显示

    我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们? 其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制 ...

  5. Html+Css+Js_之table每隔3行显示不同的两种颜色

    <html> <head> <script type="text/javascript"> /** 最近因项目的需求,有这样的一个问题: 一个t ...

  6. ul和li实现分两列(多列)布局显示

    简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...

  7. SQL两列数据,行转列

    SQL中只有两列数据(字段1,字段2),将其相同字段1的行转列 转换前: 转换后: --测试数据 if not object_id(N'Tempdb..#T') is null drop table ...

  8. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  9. 【面试总结-编程】多行两列数据,实现同key的value求和并输出

    一个文件,两列,多行. 第一列是字母,第二列是数字,同列数据之间通过空格分割. 统计首列字母相同的第二列之和. 样例输入: A 5 B 6 OO 7 A 6 A 2 OO 2 输出: A:13 B:6 ...

随机推荐

  1. 一款高速的NET版的离线免费OCR

    PaddleOCR.Onnx 一款基于Paddle的OCR,项目使用ONNX模型,速度更快.本项目同时支持X64和X86的CPU上使用.本项目是一个基于PaddleOCR的C++代码修改并封装的.NE ...

  2. 一次 HTTP 请求就需要一次 TCP 连接吗?

    一次 HTTP 请求就需要一次 TCP 连接吗? 本文写于 2021 年 2 月 9 日 太长不看版本:短连接需要,长连接不需要. 一次 HTTP 请求就需要一次 TCP 连接吗? TCP 的连接与断 ...

  3. 海量数据存储ClickHouse

    ClickHouse介绍 ClickHouse的由来和应用场景 俄罗斯Yandex在2016年开源,使用C++编写的列式存储数据库,近几年在OLAP领域大范围应用 官网:https://clickho ...

  4. 2020级cpp机考模拟题A卷-#题解2

    这部分的题目都有一定难度,有兴趣的同学可以钻研一下. 特此感谢来自BDT20030  tql的支持. 2:素数的和-2 题意: 计算不大于m的素数之和.(多么容易理解的题目啊,对吧) 题解(有点复杂的 ...

  5. 人体调优不完全指南「GitHub 热点速览 v.22.22」

    本周特推又是一个人体调优项目,换而言之就是如何健康生活,同之前的 HowToLiveLonger研究全因死亡率不同,这个项目更容易在生活中实践,比如,早起晒太阳这么一件"小事"便有 ...

  6. JavaScript之parseInt()方法

    parseInt(string, radix):用于解析一个字符串并返回指定基数的十进制整数或者NaN string参数为被解析的值,如果该值不是一个字符串,则会隐式的使用toString()方法转化 ...

  7. 这篇SpringCloud GateWay 详解,你用的到

    点赞再看,养成习惯,微信搜索[牧小农]关注我获取更多资讯,风里雨里,小农等你,很高兴能够成为你的朋友. 项目源码地址:公众号回复 sentinel,即可免费获取源码 背景 在微服务架构中,通常一个系统 ...

  8. CPPRESTSDK 编译

    首先要 git clone这个库git clone git://github.com/Microsoft/cpprestsdk.git然后git 一下 Vcpkg.\vcpkg\bootstrap-v ...

  9. JS:||运算符

    ||逻辑运算符 ||这个符号在开发中 往往是优化的代码最常用的js符号: 当用||连接语句时,回将前后语句变为Boolean类型,再进行运算: 1.当||前面条件为false,不管后面是true/fa ...

  10. 关于一次Web线下面试的思考

    前言: 今天面试一家Web前端的公司,由于跟初筛的面试官关系挺好,按理来说我在第一次线上面试就应该被淘汰了(呜呜呜),接下来是线下面试,不出意外的话,我凉了.但是这些天的面试经验并非全无收获.我的线下 ...