需求:

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. 3.Docker常用命令

    帮助启动类命令 启动docker: systemctl start docker 停止docker: systemctl stop docker 重启docker: systemctl restart ...

  2. Java 统计新客户

    上周做了一个订单数据统计的任务,统计的是订单的新客户数量,本文做一个解题过程的记录和整理. 新客户的定义 新客户指的是选取时间段有订单,时间段之前没有订单. 比如下面的订单数据: 时间段 2月1日之前 ...

  3. 148. Sort List - LeetCode

    Solution 148. Sort List Question 题目大意:对链表进行排序 思路:链表转为数组,数组用二分法排序 Java实现: public ListNode sortList(Li ...

  4. vue生命周期加载顺序

    1.beforeCreate(创建前)表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化.此钩子函数不能获取到数据,dom元素也没有渲染 ...

  5. Git移除远程已经上传的文件

    我们常常会将本地的一些秘钥文件不小心推送到远端,此时仅仅修改本地的.gitignore文件,然后再提交推送是不能将远端的此文件删除的. 此时可以用下面的命令 git rm --cached filen ...

  6. python之loggin模块与第三方模块

    目录 logging模块详解 第三方模块 openpyxl模块 logging模块详解 主要组成部分 logger对象,用于产生日志 # 第一步,创建logger对象 logger = logging ...

  7. 【原创】eNSP路由器启动#号问题排查

    1.删除拖出来的设备,重新拖出来一台---我用过[有时候好使] 2.确保Ensp的设置-工具-Virtual Box安装目录是否正确--我也遇到过[尤其是卸载掉Virtual Box重装之后] 3.确 ...

  8. MVC - forward 和 redirect 的区别

    MVC - forward 和 redirect 的区别 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服 ...

  9. SpringBoot2.x整合Prometheus+Grafana【附源码+视频】

    图文并茂,新手入门教程,建议收藏 SpringBoot2.x整合Prometheus+Grafana[附源码+视频] 附源码+视频 目录 工程简介 简介 Prometheus grafana Spri ...

  10. Android Jetpack Navigation基本使用

    Android Jetpack Navigation基本使用 本篇主要介绍一下 Android Jetpack 组件 Navigation 导航组件的 基本使用 当看到 Navigation单词的时候 ...