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; 1500px;border: 1px solid darkgray;margin: 0 auto;margin-top: 200px"> 10 <div style=" 400px;height: 35px;position: relative;margin: 0 auto;margin-top: 300px"> 11 12 <input type="text" style=" 370px;height: 35px;padding-right: 30px"> 13 14 <span style="background-image: url(i_name.jpg); 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=" 370px;height: 35px;padding-right: 30px">
这句话中padding-right 让输入框往右移动30像素 宽度缩小30像素 加起来仍然是400像素 和div的像素一样大 但用户输入的字符就不会盖住我们右边那个小人的图标了