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