我想在按下加号按钮时弹出输入标签(当前高度=0)，并在再次按下时将其删除。 如何在不删除任何 html 标签的情况下删除“待办事项列表”div 和“dfsdfs”li 之间的差距？ 如果我删除输入标签 id = "searchBox"(当前高度 = 0)，问题就解决了，但我需要输入标签。 只是找不到问题，为什么我不能在没有任何空间的情况下安装它们。
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>最佳答案
不要将输入的宽度或高度设置为 0，而是使用 display: none 将其从布局流中完全移除。
关于javascript - 标签之间的 CSS 样式空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59200673/