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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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
GD输出汉字的函数的分析
2006/10/09 PHP
基于mysql的论坛(4)
2006/10/09 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
laravel自定义分页效果
2017/07/23 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
戴尔美国官网:Dell
2016/08/31 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
UML设计模式笔试题
2014/06/07 面试题
跟单文员的岗位职责
2013/11/14 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
医院党员公开承诺书
2014/08/30 职场文书
索赔员岗位职责
2015/02/15 职场文书
工作岗位职责范本
2015/02/15 职场文书
2019 入党申请书范文
2019/07/10 职场文书