el-form每行显示两列底部按钮居中效果的实现


Posted in HTML / CSS onAugust 05, 2022

需求:

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

问题:

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

尝试

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

解决办法

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

el-form每行显示两列底部按钮居中效果的实现

el-form每行显示两列底部按钮居中效果的实现

el-form每行显示两列底部按钮居中效果的实现

参考链接

http://t.csdn.cn/nrQ0C

https://www.3water.com/article/240039.htm

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

到此这篇关于el-form每行显示两列底部按钮居中效果的实现的文章就介绍到这了,更多相关el-form底部按钮居中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3绘制百度的小度熊
Oct 29 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 #HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
前端使用svg图片改色实现示例
Jul 23 #HTML / CSS
详解flex:1什么意思
Jul 23 #HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 #HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 #HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 #HTML / CSS
You might like
php遍历删除整个目录及文件的方法
2015/03/13 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python的动态重新封装的教程
2015/04/11 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
好人好事事迹材料
2014/02/12 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
机械专业求职信
2014/05/25 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
2014年药房工作总结
2014/11/22 职场文书
学校食品安全责任书
2015/01/29 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
python tkinter实现定时关机
2021/04/21 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫