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: ;

  left:225px;

  color: $global-gray-light-color;

  font-size: 14px;

}