input表单内添加单位或者文字或者图标的方法

如上面图的需求。

暂时想到两种方法
一、绝对定位

.div2 span{
    position:absolute;
    right:50%;
}
<div class="div2">
    <label for="money">输入金额：</label>
    <input type="text" name="money"><span>$</span>
</div>

原理很好理解，父级position：relative，图标/单位position：absolute
然后使用left right top buttom 移动到响应的位置。
这里说一点，如果是响应式布局，页面有伸缩效果的值用百分比表示就好了。

二、假装是一起的
原理其实就是将input的border隐藏掉然后在外面套一个框，通过调整样式使他们看起来像一个整体。

.div3{
    border:1px solid gray;
    margin-left:20px;
    width:220px;
}
.div3 input{
    border:0;
}
<div class="div3">
    <span>姓名</span>
    <input type="text" name="name">
</div>

效果如图

可以将文字换成图标什么的 就和最开始的图像了。
样式基本没修饰，就表达个意思，哈哈。