表情包做旧网站,进一步加强网站建设,网络舆情监测与研判,用html写一个个人介绍目录 前言#xff1a;
痛点#xff1a;
1.左对齐#xff0c;右对齐在中文和外语情况下字数不同#xff0c;固定宽度会使名称换行#xff0c;不在整行对齐#xff0c;影响美观。
2.如果名称和输入框不在一行#xff0c;会使页面越来越长
3.label-width值给变量#…目录 前言
痛点
1.左对齐右对齐在中文和外语情况下字数不同固定宽度会使名称换行不在整行对齐影响美观。
2.如果名称和输入框不在一行会使页面越来越长
3.label-width值给变量根据语言显示不同宽度语言很多时宽度设定困难
解决
添加样式如果在vue项目中外面可以包一层class,这样不影响其他页面的样式
总结
以上就是今天的分享欢迎关注我点赞评论~ 前言
基于vue2element-uii18n开发的项目最近发现一个痛点就是表单在切换多语言时会有错乱。
痛点
1.左对齐右对齐在中文和外语情况下字数不同固定宽度会使名称换行不在整行对齐影响美观。 2.如果名称和输入框不在一行会使页面越来越长 官网API中推荐使用表单的名称和输入框换行展示 但是这就造成页面会出现竖向滚动条页面会拉出也有点不友好。
3.label-width值给变量根据语言显示不同宽度语言很多时宽度设定困难 也有人根据不同语言设置不同的宽度做成变量根据语言再做切换改变 比如官网中文设置宽度80px,英文下设置100px,这样也不友好如果动态添加语言有些阿拉伯语呀西班牙语乌克兰语呀这个宽度是不可控的。
解决
为了解决以上痛点对官网UI加了层改造这样就能保证某个语言显示排版对齐的情况下其他文字长的也不会拐弯显示拖垮了。 超出就会往后挤没超过则还是对齐的效果。
添加样式如果在vue项目中外面可以包一层class,这样不影响其他页面的样式
.el-form-item{display: flex;flex-direction: row;
}
.el-form-item__label{width: auto!important;min-width:100px;white-space: nowrap;padding-left: 15px;position: relative;
}
.el-form-item__label:before{position: absolute;left: 5px;top: 2px;
}
.el-form-item__content{margin-left: 10px!important;width: calc(100% - 100px);flex: 2;
}
总结
解决这种样式问题关键的样式 父级display:flex;flex-direction:row; 名称min-width:100px;white-space:nowrap;padding-left:15px; 输入框width:calc(100% - 100px);flex:2; 以上就是今天的分享欢迎关注我点赞评论~
