el-form每行显示两列底部按钮居中效果的实现
发布时间：2022-07-26 15:41:40 作者：shayloyuki 
我要评论
我要评论这篇文章主要介绍了el-form每行显示两列底部按钮居中效果的实现,解决办法也很简单只需给el-form 添加 inline 属性，给每个 item 设置宽度，给底部按钮 flex 布局，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧
需求：
el-form 每行显示两列，底部按钮居中
问题：
以前的解决办法是： el-col, el-row。但是这里只有一个 el-form-item 的 label 数据是已知的，其余项都是循环得到的，数量不固定，因此不能采用 el-col 方式。
尝试
尝试过 item 左浮动，flex，底部定位，都无法解决。
解决办法
el-form 添加 inline 属性，给每个 item 设置宽度；给底部按钮 flex 布局。
参考链接
https://www.jb51.net/article/240039.htm
思考说明 el-form 本身是 block 块级元素;对 flex 和 定位的详细内容不是很熟悉，比如 flex:1
到此这篇关于el-form每行显示两列底部按钮居中效果的实现的文章就介绍到这了,更多相关el-form底部按钮居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了el-form每行显示两列底部按钮居中效果的实现,解决办法也很简单只需给el-form 添加 inline 属性，给每个 item 设置宽度，给底部按钮 flex 布局，本文给大2022-07-26实现div垂直居中的display:table-cell方法示例介绍
要实现盒模型中的div居中，可以使用display:table-cell方法且兼容多浏览器，下面有个示例，感兴趣的朋友可以练练手2014-07-24用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的
一直以来,在HTML中,img input select button 这里元素，垂直对齐,比较难。结果我长大了。我发现了一个现像，其实解决这些问题只是一句话的事。2011-03-08
最新评论