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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
微信小程序开发探究
2016/12/27 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python zip()函数使用方法解析
2019/10/31 Python
python FTP编程基础入门
2021/02/27 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
班班通项目实施方案
2014/02/25 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
护士自荐信范文
2015/03/25 职场文书
特种设备安全管理制度
2015/08/06 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Django migrate报错的解决方案
2021/05/20 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python