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