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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
最短的IE判断代码
2011/03/13 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Python KMeans聚类问题分析
2018/02/23 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
四议两公开实施方案
2014/03/28 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Java中的随机数Random
2022/03/17 Java/Android