溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹html+css如何制作div標簽增加右上角刪除圖標，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
一、需求描述
在Div標簽的右上角顯示刪除圖標
二、實現方式
html、CSS
三、參考代碼
<style>
.container{
width:60px;
height:60px;
border: 1px dotted red;
position:relative;
}
.content{
position:relative;
top:20px;
}
.delete{
width:20px;
height:20px;
border-radius:60%;
position:absolute;
top:-10px;
right:-10px;
}
</style>
<div class="container">
<img src="http://www.iconpng.com/download/png/61252" class="delete" οnclick="alert(1)"/>
<div class="content">content</div>
</div>
<div class="container">
<img src="http://www.iconpng.com/download/png/61252" class="delete"/>
<div class="content">content</div>
</div>附錄：在輸入框左邊加一個小圖標，css樣式應該怎么寫？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}
.text input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}
</style>
</head>
<body>
<div class="text">
<input type="text"/>
</div>
</body>
</html>以上是“html+css如何制作div標簽增加右上角刪除圖標”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
