1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 ?9 <div style="height: 600px;width: 1500px;border: 1px solid darkgray;margin: 0 auto;margin-top: 200px">10 ????<div style="width: 400px;height: 35px;position: relative;margin: 0 auto;margin-top: 300px">11 12 ????????<input type="text" style="width: 370px;height: 35px;padding-right: 30px">13 14 ????????<span style="background-image: url(i_name.jpg);width: 16px;height: 16px;display: inline-block;position: absolute;top: 11px;right: 1px"></span>15 16 ????</div>17 18 </div>19 20 </body>21 </html>
注意：
<input type="text" style="width: 370px;height: 35px;padding-right: 30px">
这句话中padding-right 让输入框往右移动30像素 ?宽度缩小30像素 加起来仍然是400像素 和div的像素一样大 但用户输入的字符就不会盖住我们右边那个小人的图标了
html +css 登陆框中加用户图片，并设置登陆名不盖住图标
原文地址：https://www.cnblogs.com/topzhao/p/9170411.html