一個div裏面套了一個input標籤,span標籤通過position屬性,懸浮在input標籤的右邊上面。輸入信息時,利用padding-right,就算信息內容很長,也不會超過圖標所在的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:35px;width:400px;position:relative;">
<input type="text" style="height:35px;width:370px;padding-right: 30px"/ >
<span style="position:absolute;top: 5px; right: 5px;background-image:url('2.jpg'); display:inline-block;height: 30px; width:30px;"></span>
</div>
<div style="height:35px;width:400px;position:relative;margin-top:10px;">
<input type="text" style="height:35px;width:370px;padding-right: 30px"/ >
<span style="position:absolute;top: 5px; right: 5px;background-image:url('2.jpg'); display:inline-block;height: 30px; width:30px;"></span>
</div>
</body>
</html>