首页 > 其他 > 详细

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

时间:2019-03-14 16:32:03      阅读:324      评论:0      收藏:0      [点我收藏+]

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

第一次尝试,因为本身项目用的是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里面输入框的两侧同时添加额外元素)

原文:https://www.cnblogs.com/songForU/p/10530450.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!