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

相关文章
|
1月前
|
JavaScript
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
|
9月前
修改elementui table 组件滚动条样式
修改elementui table 组件滚动条样式
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1618 0
|
7天前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
1月前
|
JavaScript
vue给li标签设置鼠标覆盖阴影样式
vue给li标签设置鼠标覆盖阴影样式
|
1月前
|
JavaScript API
在vue使用class选择器和下标更改点击列表样式
在vue使用class选择器和下标更改点击列表样式
44 0
|
1月前
|
Web App开发 前端开发
CSS - 修改输入框placeholder默认颜色
CSS - 修改输入框placeholder默认颜色
32 0
|
8月前
|
前端开发 容器
|
10月前
|
前端开发
CSS中有哪些隐藏页面元素的方法?
CSS中有哪些隐藏页面元素的方法?
79 0
|
前端开发 程序员
【前端】使用样式选择器before和after布局,以及简单的表单输入框布局
本篇文章来讲解下样式选择器before和after的用法,以及doctype的作用 有时候真的需要温故而知新,用了那么多年的前端,对一些知识点灵活运用加点小技巧也是挺有趣的
142 0