标签：__ el vue color box 表单 input border 时分秒

需求如下：

问题分析：

因为用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;           }

标签：__,el,vue,color,box,表单,input,border,时分秒
来源： https://www.cnblogs.com/duanhuarong/p/11934520.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。