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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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 强制下载文件代码
2010/10/24 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php实现复制移动文件的方法
2015/07/29 PHP
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue中@change兼容问题详解
2019/10/25 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
python爬虫解决验证码的思路及示例
2019/08/01 Python
浅谈Python type的使用
2019/11/19 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
小学捐书活动总结
2014/07/05 职场文书
环境保护建议书
2014/08/26 职场文书
钱学森电影观后感
2015/06/04 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android