elementui的form表单元素默认居中的问题得解决

简介: elementui的form表单元素默认居中的问题得解决

在利用elementui写表单的时候, 由于表单中涉及多种form元素,刚开始是用的纯html利用cdn的方式引入的elementui页面整体观感如下:

后来由于路由跳转的原因, 还是选择了vue-cli 来构建项目, 当把之前写好的代码复原到vue-li项目中的时候,出现了错位情况,如下:

估计是因为elementui的版本不一致, 可能是vue-cli中elementui版本默认表单元素是居中的。

对比发现vue-cli版本中的elementui默认是有text-align="center"的, 所以都是居中的, 我们只要改成自己想要的模样就行。

加一个text-align="left"即可。

理想和现实总是有差距的,居中问题解决了, 但是多选框还是有瑕疵如下:

经仔细观察, 发现字体不一样, vue-cli自己指定了字体, 该字体宽度较大,所以还是错行了。解决办法: 换字体或者把选项长度短的往前放

目录
打赏
0
0
0
0
6
分享
相关文章
Ant Design Vue 中Drawer自定头部的样式、内容部分的样式、弹出层的样式
Ant Design Vue 中Drawer自定头部的样式、内容部分的样式、弹出层的样式
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
177 0
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1742 0
|
7月前
|
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
115 0
|
7月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
233 0
JQuery 获取选中多选框的value,合并成数组传给后台
JQuery 获取选中多选框的value,合并成数组传给后台
52 0
vue如何设置元素的显示隐藏
方法:可以使用v-if,也可以使用v-show指令。
301 0