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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php动态函数调用方法
2015/05/21 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python实现五子棋游戏
2019/06/18 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python中字符串的编码与解码详析
2020/12/03 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
房产公证书范本
2014/04/10 职场文书
班主任个人工作反思
2014/04/28 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Python基础学习之奇异的GUI对话框
2021/05/27 Python