1. 程式人生 > >input標簽附帶提示文字(bootstrap裏面輸入框的兩側同時添加額外元素)

input標簽附帶提示文字(bootstrap裏面輸入框的兩側同時添加額外元素)

image for size 但是 元素符號 text tst form put

一直不太喜歡用定位,今天寫界面的時候,要在輸入框右邊添加默認的元素符號。

第一次嘗試,因為本身項目用的是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; }

技術分享圖片

input標簽附帶提示文字(bootstrap裏面輸入框的兩側同時添加額外元素)