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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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中几种常见的超时处理全面总结
2012/09/11 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
linux 后台运行node服务指令方法
2018/05/23 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Python selenium 三种等待方式解读
2016/09/15 Python
简单实现python画圆功能
2018/01/25 Python
Django实现分页功能
2018/07/02 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
django的ORM操作 增加和查询
2019/07/26 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
英文简历中的自我评价
2013/10/06 职场文书
联欢晚会主持词
2014/03/25 职场文书
英语故事演讲稿
2014/04/29 职场文书
大型公益活动策划方案
2014/08/20 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
甲午大海战观后感
2015/06/02 职场文书
公司庆典主持词
2015/07/04 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js