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中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
浅析HTML5 Landmark
Sep 11 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 中使用随机数的三个步骤
2006/10/09 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
2017/02/02 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
通信工程专业女生个人求职信
2013/09/21 职场文书
产品销售员岗位职责
2013/12/18 职场文书
协议书格式
2014/04/23 职场文书
毕业生应聘求职信
2014/07/10 职场文书
争先创优心得体会
2014/09/12 职场文书
博士生专家推荐信
2014/09/26 职场文书
授权委托书协议书
2014/10/16 职场文书
加入学生会自荐书
2015/03/05 职场文书
无房证明样本
2015/06/17 职场文书
初婚初育证明范本
2015/06/18 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python