需求如下:
问题分析:
因为用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;
}