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

相关文章
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
1565 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9162 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
数据安全/隐私保护
SpringSecurity利用@PreAuthorize注解自定义权限校验
利用@PreAuthorize注解自定义权限校验
3393 0
|
12月前
|
自然语言处理 前端开发 JavaScript
推荐 10 个前端开发会用到的工具网站
本文介绍了多个前端开发工具,包括 Web Design Museum、Landing Page、Google Fonts、Lorem Ipsum、Animista、Blobmaker、Spline、CodeToGo、UnusedCSS 和 Responsively,帮助开发者提高效率和项目质量。这些工具涵盖了设计、动画、代码片段管理、响应式测试等多个方面。
496 0
推荐 10 个前端开发会用到的工具网站
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
829 5
Vue使用element中table组件实现单选一行
|
JavaScript 前端开发
vue实现侧边折叠菜单栏手风琴效果
该文章介绍了如何使用Vue.js实现具有手风琴效果的侧边折叠菜单栏,包括HTML结构设计、CSS样式设置以及JavaScript交互逻辑的编写。
|
JavaScript
vue2中左侧菜单和头部tab标签联动
vue2中左侧菜单和头部tab标签联动
468 0
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
2839 1
|
移动开发 前端开发 JavaScript
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)
812 2
|
Java API Apache
Apache CXF生成WebService的客户端
Apache CXF生成WebService的客户端
426 0