input标签附带提示文字（bootstrap里面输入框的两侧同时添加额外元素）

一直不太喜欢用定位，今天写界面的时候，要在输入框右边添加默认的元素符号。

第一次尝试，因为本身项目用的是bootstrap所以就想利用输入框的两侧同时添加额外元素。

但是写了代码发现效果不同。

第二次直接将input里的text-align:right；改成了从右边开始。这样导致的是，所有输入从右边开始，并不是我想要的。

第三次使用定位解决问题，

  <div class="form-group input-group-sm addon-position">
   <span class="star-red red-left">*</span>
   <label class="input-title">主贷人份额占比</label>
   <input type="text" class="form-control input-size10" >
   <i class="addon">元</i>
     </div>

.addon-position{
  position: relative;
}
.addon{
  position: absolute;
  z-index: 5;
  left:225px;
  color: $global-gray-light-color;
  font-size: 14px;
}

 

转载于:https://www.cnblogs.com/songForU/p/10530450.html