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自己指定了字体, 该字体宽度较大,所以还是错行了。解决办法: 换字体或者把选项长度短的往前放

相关文章
|
7月前
|
JavaScript
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1720 0
|
2月前
|
前端开发 容器
表单的默认样式
【10月更文挑战第17天】
22 1
|
5月前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
89 0
|
5月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
184 0
|
6月前
|
移动开发 前端开发 数据安全/隐私保护
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
45 0
|
7月前
|
Web App开发 前端开发
CSS - 修改输入框placeholder默认颜色
CSS - 修改输入框placeholder默认颜色
53 0
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
前端开发 容器
CSS 元素居中方式总结
CSS 元素居中
115 0