需求如下:
问题分析:
因为用elementui组件 el-input 相当于块级元素,后面的单位<span>分</span>会被挤下去,无法在同一水平。
解决方法:
不用它的组件,自己写个原生的,用组件的class名,替换el-input__inner 为 el-input__myinner
<
el-form-item
label=
"处理耗时"
>
<
div
class=
"el-form-item__content"
></
div
>
<
input
type=
"text"
class=
'el-input__myinner'
v-model="
form.
take_time"
autocomplete=
'off'
>
<
span
>分
</
span
>
</
el-form-item
>
在F12模式下,可以查看 el-input__inner 的样式,将样式复制下来,修改一下就可。
.el-input__myinner{
-webkit-appearance:
none;
background-color:
#FFF;
background-image:
none;
border-radius:
4px;
border:
1px
solid
#DCDFE6;
-webkit-box-sizing:
border-box;
box-sizing:
border-box;
color:
#606266;
display:
inline-block;
font-size:
inherit;
height:
40px;
line-height:
40px;
outline:
0;
padding:
0
15px;
-webkit-transition:
border-color
.2s
cubic-bezier(
.645,
.045,
.355,
1);
transition:
border-color
.2s
cubic-bezier(
.645,
.045,
.355,
1);
margin-right:
10px;
}