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的像素一樣大 但用戶輸入的字符就不會蓋住我們右邊那個小人的圖標了