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 25 HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 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来自动调用不同服务器上的flash
2006/10/09 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python list转矩阵的实例讲解
2018/08/04 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
市场营销毕业求职信
2014/08/07 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
地道战观后感400字
2015/06/04 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python