需求:

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. maccms10二开批量入库和资源打包

    批量入库 因为maccms自带的采集采集起来很慢,而且很多资源站的采集接口不能对内容排序,导致最旧的数据最后入库.用java写个采集程序,采集完入库的时候发现不能一次性入库多个数据,导致入库也很慢,所 ...

  2. K8S面试应知必回

    目录 面试不要不懂装懂,不会就是不会,不可能每个人都接触过所有的知识! 1. 基础问题 1.1 Service是怎么关联Pod的?(课程Service章节) 1.2 HPA V1 V2的区别 1.3 ...

  3. 基于PYQT5的截图翻译工具

    基于PYQT5的截图翻译工具 功能介绍 翻译功能 截图功能(快捷键 + 截图存储到剪切板中) 文字识别OCR(基于百度API的文字识别) UI 界面 截图 截图可以使用第三方截图 或 使用PyQt5截 ...

  4. Django+Vue+Nginx+Https域名代理访问

    Django+Vue使用Nginx实现Https域名的安全访问 前端 VUE 前端访问自身域名: https://demo.com,后序使用 Nginx 代理至后端 直接访问后端https:api会无 ...

  5. 《Unix 网络编程》15:Unix 域协议

    Unix 域协议 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 本 ...

  6. python变量名下划线

    xx: 公有变量 _x: 单前置下划线,保护变量,私有化属性或方法,不能用于'from module import *' 以单下划线开头的表示的是protected类型的变量.即保护类型只能允许其/类 ...

  7. 如何优化PlantUML流程图(时序图)

    这篇文章用来介绍,如何画出好看的流程图. 1. 选择合适的组件 1.1 plantuml官方提供的组件 1.2 加载图片 1.2.1 加载本地图片 1.2.2 加载网络图片 1.2.3 图片资源 2. ...

  8. 前端学习 linux —— 第一篇

    前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...

  9. BUUCTF-snake

    snake 这是我最想吐槽的一个题目,搞这个蛇在这里.我看的这个图就头皮发麻. 最不愿意做的题,建议以后出题能不能搞个正常的啊. 16进制打开发现压缩包,binwalk提取,得到三个文件 key中是b ...

  10. 关于使用 koa路由与mysql模块, ctx.body获取不到值的问题

    var Koa = require('koa');var Router = require('koa-router' );var bodyParser = require('koa-bodyparse ...