el-form 每行显示两列,底部按钮居中
需求:
el-form 每行显示两列,底部按钮居中
问题:
以前的解决办法是: el-col, el-row。但是这里只有一个 el-form-item 的 label 数据是已知的,其余项都是循环得到的,数量不固定,因此不能采用 el-col 方式。
尝试
尝试过 item 左浮动,flex,底部定位,都无法解决。
解决办法
el-form 添加 inline 属性,给每个 item 设置宽度;给底部按钮 flex 布局。



参考链接
思考
- 说明 el-form 本身是
block块级元素; - 对
flex和 定位的详细内容不是很熟悉,比如flex:1
el-form 每行显示两列,底部按钮居中的更多相关文章
- Element UI Form 每行显示多列,即多个 el-form-item
Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...
- flex一行显示两列(CSS)
外层display: flex;flex-wrap: wrap; 里层 width:49%
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...
- 如何将文章列表用<li>分两列显示
我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们? 其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制 ...
- Html+Css+Js_之table每隔3行显示不同的两种颜色
<html> <head> <script type="text/javascript"> /** 最近因项目的需求,有这样的一个问题: 一个t ...
- ul和li实现分两列(多列)布局显示
简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...
- SQL两列数据,行转列
SQL中只有两列数据(字段1,字段2),将其相同字段1的行转列 转换前: 转换后: --测试数据 if not object_id(N'Tempdb..#T') is null drop table ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- 【面试总结-编程】多行两列数据,实现同key的value求和并输出
一个文件,两列,多行. 第一列是字母,第二列是数字,同列数据之间通过空格分割. 统计首列字母相同的第二列之和. 样例输入: A 5 B 6 OO 7 A 6 A 2 OO 2 输出: A:13 B:6 ...
随机推荐
- 尾递归与 memorize 优化
尾递归与 memorize 优化 本文写于 2020 年 12 月 10 日 递归 递归是一种非常常见的算法思维,在大家刚开始学编程的时候应该就会接触到. 我们可以这么理解递归: function 讲 ...
- mysql的命令二
1.插入数据 格式一:insert into table_name valuse (字段1,字段2): insert test1 values ('wangsan',22,'male'); 格式二:i ...
- Nvidia Triton使用教程:从青铜到王者
1 相关预备知识 模型:包含了大量参数的一个网络(参数+结构),体积10MB-10GB不等 模型格式:相同的模型可以有不同的存储格式(可类比音视频文件),目前主流有torch.tf.onnx和trt, ...
- 好客租房30-事件绑定this指向(箭头函数)
1箭头函数 利用箭头函数自身不绑定this的特点 //导入react import React from 'react' import ReactDOM from 'rea ...
- 135_Power Query M语言快捷输入之输入法设置自定义短语
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 因为工作原因,把电脑重装了下,当敲M的时候总感觉那里不对.原来是我的M自定义短语没有同步.由于我的自定义短语还是 ...
- Flask_WTF实现表单
Flask_WTF实现表单可分为六个步骤: ①导入FlaskForm扩展包(from flask_wtf import FlaskForm) ②导入StringField,PasswordField, ...
- ATM+购物车项目流程
目录 需求分析 架构设计 功能实现 搭建文件目录 conf配置文件夹 lib公共功能文件夹 db数据文件夹 interface业务逻辑层文件夹 core表现层文件夹 测试 最外层功能(src.py) ...
- 翻页组件page-flip调用问题
翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...
- Spring Cloud OpenFeign 的 5 个优化小技巧!
OpenFeign 是 Spring 官方推出的一种声明式服务调用和负载均衡组件.它的出现就是为了替代已经进入停更维护状态的 Feign(Netflix Feign),同时它也是 Spring 官方的 ...
- npm错误:Cannot find module ‘compression-webpack-plugin
转自 (82条消息) 前端开发遇到Cannot find module 'compression-webpack-plugin'问题解决_brave_zhao的博客-CSDN博客 <div id ...