我有这段代码
$(document).ready(function(){
$('#deleteGoogle').click(function(){ $('#googleDiv').css('display', 'none'); });
$('#deleteYoutube').click(function(){ $('#youtubeDiv').css('display', 'none'); });
$('#deleteFacebook').click(function(){ $('#facebookDiv').css('display', 'none'); });
$('#deleteTwitter').click(function(){ $('#twitterDiv').css('display', 'none'); });
$('#deleteInstagram').click(function(){ $('#instaDiv').css('display', 'none'); });
$('#deletePlus').click(function(){ $('#plusDiv').css('display', 'none'); });
$('#deleteDrive').click(function(){ $('#driveDiv').css('display', 'none'); });
$('#deleteLink').click(function(){ $('#linkDiv').css('display', 'none'); });
$('#deleteGit').click(function(){ $('#gitDiv').css('display', 'none'); });
$('#deleteSpace').click(function(){ $('#spaceDiv').css('display', 'none'); });
});

#bookmarkMenu {
height: 350px;
width: 250px;
position: absolute;
right: 40px;
top: 53px;
border-radius: 3px;
border: 1px rgb(211, 211, 211) solid;
background-color: rgb(240, 240, 240);
overflow-y: scroll;
overflow-x: hidden;
}
.logos {
height: 40px;
width: 40px;
position: relative;
left: 10px;
top: 5px;
}
.bookmarkLinks {
font-weight: 500;
font-size: 20px;
font-family: sans-serif;
left: 50px;
position: relative;
bottom: 45px;
width: 70px;
}
.logoIMG {
height: 40px;
width: 40px;
}
#lineBookmark {
border: 1px rgb(211, 211, 211) solid;
width: 249px;
position: absolute;
top: 1.4cm;
}
.delete {
height: 30px;
width: 30px;
position: relative;
left: 185px;
bottom: 90px;
cursor: pointer;
}
a {
text-decoration: none;
}
a:hover {
color: black;
}
a:visited {
color: black;
}
a:link {
color: black;
}
a:active {
color: black;
}
.titles {
font-weight: 500;
font-size: 1.3em;
font-family: sans-serif;
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
</head>
<body>
<div id="bookmarkMenu">
<h1 class="titles" id="bookmarkWord">Bookmarks</h1>
<div id="lineBookmark"></div>
<a href="http://www.google.com"><div class="logos" id="googleDiv"><img src="googleLogo.png" title="Google" class="logoIMG"><h2 class="bookmarkLinks">Google</h2></a><img src="delete.png" class="delete" id="deleteGoogle"></div><br>
<a href="http://www.youtube.com"><div class="logos" id="youtubeDiv"><img src="youtubeLogo.png" title="Youtube" class="logoIMG"><h2 class="bookmarkLinks">Youtube</h2></a><img src="delete.png" class="delete" id="deleteYoutube"></div><br>
<a href="http://www.facebook.com"><div class="logos" id="facebookDiv"><img src="facebookLogo.png" title="Facebook" class="logoIMG"><h2 class="bookmarkLinks">Facebook</h2></a><img src="delete.png" class="delete" id="deleteFacebook"></div><br>
<a href="http://www.twitter.com"><div class="logos" id="twitterDiv"><img src="twitterLogo.png" title="Twitter" class="logoIMG"><h2 class="bookmarkLinks">Twitter</h2></a><img src="delete.png" class="delete" id="deleteTwitter"></div><br>
<a href="http://www.instagram.com"><div class="logos" id="instaDiv"><img src="instaLogo.png" title="Instagram" class="logoIMG"><h2 class="bookmarkLinks">Instagram</h2></a><img src="delete.png" class="delete" id="deleteInstagram"></div><br>
<a href="http://plus.google.com"><div class="logos" id="plusDiv"><img src="g+Logo.png" title="Google+" class="logoIMG"><h2 class="bookmarkLinks">Google+</h2></a><img src="delete.png" class="delete" id="deletePlus"></div><br>
<a href="http://drive.google.com"><div class="logos" id="driveDiv"><img src="driveLogo.png" title="Google Drive" class="logoIMG"><h2 class="bookmarkLinks">Drive</h2></a><img src="delete.png" class="delete" id="deleteDrive"></div><br>
<a href="http://www.linkedin.com"><div class="logos" id="linkDiv"><img src="linkLogo.png" title="Linkedin" class="logoIMG"><h2 class="bookmarkLinks">Linkedin</h2></a><img src="delete.png" class="delete" id="deleteLink"></div><br>
<a href="http://www.github.com"><div class="logos" id="gitDiv"><img src="githubLogo.png" title="Github" class="logoIMG"><h2 class="bookmarkLinks">Github</h2></a><img src="delete.png" class="delete" id="deleteGit"></div><br>
<a href="http://www.myspace.com"><div class="logos" id="spaceDiv"><img src="myspaceLogo.png" title="Myspace" class="logoIMG"><h2 class="bookmarkLinks">Myspace</h2></a><img src="delete.png" class="delete" id="deleteSpace"></div><br>
</div>
</body>
</html>
&#13;
问题是,每当我想要删除书签时(通过点击位于书签菜单右侧的图像),删除的书签下面的元素只会向上移动几个像素,并且不会取而代之。我该如何解决这个问题。
答案 0 :(得分:0)
只需删除您的<br>
,然后转到课程“徽标”margin-top
。 <br>
这是在元素之间建立边距的正确方法!
$(document).ready(function(){
$('#deleteGoogle').click(function(){ $('#googleDiv').css('display', 'none'); });
$('#deleteYoutube').click(function(){ $('#youtubeDiv').css('display', 'none'); });
$('#deleteFacebook').click(function(){ $('#facebookDiv').css('display', 'none'); });
$('#deleteTwitter').click(function(){ $('#twitterDiv').css('display', 'none'); });
$('#deleteInstagram').click(function(){ $('#instaDiv').css('display', 'none'); });
$('#deletePlus').click(function(){ $('#plusDiv').css('display', 'none'); });
$('#deleteDrive').click(function(){ $('#driveDiv').css('display', 'none'); });
$('#deleteLink').click(function(){ $('#linkDiv').css('display', 'none'); });
$('#deleteGit').click(function(){ $('#gitDiv').css('display', 'none'); });
$('#deleteSpace').click(function(){ $('#spaceDiv').css('display', 'none'); });
});
#bookmarkMenu {
height: 350px;
width: 250px;
position: absolute;
right: 40px;
top: 53px;
border-radius: 3px;
border: 1px rgb(211, 211, 211) solid;
background-color: rgb(240, 240, 240);
overflow-y: scroll;
overflow-x: hidden;
}
.logos {
height: 40px;
width: 40px;
position: relative;
left: 10px;
top: 5px;
margin-top: 10px;
}
.bookmarkLinks {
font-weight: 500;
font-size: 20px;
font-family: sans-serif;
left: 50px;
position: relative;
bottom: 45px;
width: 70px;
}
.logoIMG {
height: 40px;
width: 40px;
}
#lineBookmark {
border: 1px rgb(211, 211, 211) solid;
width: 249px;
position: absolute;
top: 1.4cm;
}
.delete {
height: 30px;
width: 30px;
position: relative;
left: 185px;
bottom: 90px;
cursor: pointer;
}
a {
text-decoration: none;
}
a:hover {
color: black;
}
a:visited {
color: black;
}
a:link {
color: black;
}
a:active {
color: black;
}
.titles {
font-weight: 500;
font-size: 1.3em;
font-family: sans-serif;
text-align: center;
}
<div id="bookmarkMenu">
<h1 class="titles" id="bookmarkWord">Bookmarks</h1>
<div id="lineBookmark"></div>
<a href="http://www.google.com"><div class="logos" id="googleDiv"><img src="googleLogo.png" title="Google" class="logoIMG"><h2 class="bookmarkLinks">Google</h2></a><img src="delete.png" class="delete" id="deleteGoogle"></div>
<a href="http://www.youtube.com"><div class="logos" id="youtubeDiv"><img src="youtubeLogo.png" title="Youtube" class="logoIMG"><h2 class="bookmarkLinks">Youtube</h2></a><img src="delete.png" class="delete" id="deleteYoutube"></div>
<a href="http://www.facebook.com"><div class="logos" id="facebookDiv"><img src="facebookLogo.png" title="Facebook" class="logoIMG"><h2 class="bookmarkLinks">Facebook</h2></a><img src="delete.png" class="delete" id="deleteFacebook"></div>
<a href="http://www.twitter.com"><div class="logos" id="twitterDiv"><img src="twitterLogo.png" title="Twitter" class="logoIMG"><h2 class="bookmarkLinks">Twitter</h2></a><img src="delete.png" class="delete" id="deleteTwitter"></div>
<a href="http://www.instagram.com"><div class="logos" id="instaDiv"><img src="instaLogo.png" title="Instagram" class="logoIMG"><h2 class="bookmarkLinks">Instagram</h2></a><img src="delete.png" class="delete" id="deleteInstagram"></div>
<a href="http://plus.google.com"><div class="logos" id="plusDiv"><img src="g+Logo.png" title="Google+" class="logoIMG"><h2 class="bookmarkLinks">Google+</h2></a><img src="delete.png" class="delete" id="deletePlus"></div>
<a href="http://drive.google.com"><div class="logos" id="driveDiv"><img src="driveLogo.png" title="Google Drive" class="logoIMG"><h2 class="bookmarkLinks">Drive</h2></a><img src="delete.png" class="delete" id="deleteDrive"></div>
<a href="http://www.linkedin.com"><div class="logos" id="linkDiv"><img src="linkLogo.png" title="Linkedin" class="logoIMG"><h2 class="bookmarkLinks">Linkedin</h2></a><img src="delete.png" class="delete" id="deleteLink"></div>
<a href="http://www.github.com"><div class="logos" id="gitDiv"><img src="githubLogo.png" title="Github" class="logoIMG"><h2 class="bookmarkLinks">Github</h2></a><img src="delete.png" class="delete" id="deleteGit"></div>
<a href="http://www.myspace.com"><div class="logos" id="spaceDiv"><img src="myspaceLogo.png" title="Myspace" class="logoIMG"><h2 class="bookmarkLinks">Myspace</h2></a><img src="delete.png" class="delete" id="deleteSpace"></div>
</div>