所以我一直在为我的第一个项目做一个待办事项列表。我制作了一个按钮，它可以使用用户输入创建一个新的div。当我点击DIV时，我希望从一条新的线上开始，但它被卡在了同一条线上。有人知道我做错了什么吗？很抱歉有css代码，我正在努力学习。感谢
const toDoContainer = document.createElement('P');
let btnAdd = document.getElementById('btnAdd');
let toDoContent = document.createTextNode(toDoItem);
console.log(toDoItem);
btnAdd.addEventListener('click', function() {
let toDoItem = document.getElementById('toDoItem').value;
alert(toDoItem);
const toDiv = document.createElement('div');
toDiv.classList = "toDiv";
document.querySelector('.itemsContainer').appendChild(toDiv);
const toDoContainer = document.createElement('li');
let toDoContent = document.createTextNode(toDoItem);
toDoContainer.appendChild(toDoContent);
toDiv.appendChild(toDoContainer);
toDoContainer.addEventListener('dblclick', function() {
toDoContainer.removeChild(toDoContent);
})
toDoContainer.addEventListener('click', function() {
toDoContainer.style.textDecoration = "line-through"
toDoContainer.style.color = "#C0C0C0"
})
});* {
margin: 0;
padding: 0;
box-sizing: 0;
}
body {
background-color: #c80808
}
#header {
margin: 0;
padding: 0;
height: 25em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 3px;
font-family: sans-serif;
color: rgb(233, 233, 233);
}
.main {
font-family: sans-serif;
color: white;
padding: 20px;
width: 100%;
height: 10vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items:
}
#toDoItem {
height: 2em;
width: 23em;
padding: 10px;
/* margin: 10px 30px; */
border: 0;
box-shadow: 5px 8px 9px darkred;
border-radius: 5px;
font-family: inherit;
font-size: 15px;
}
#btnAdd {
background-color: rgb(160, 0, 252);
width: 4em;
height: 3.75em;
border: 0px;
border-radius: 5px;
font-size: 0.90;
/* margin-top: 15px;
margin-right: 50px; */
color: white;
font-family: inherit;
font-weight: bolder;
box-shadow: 5px 8px 9px darkred;
}
.itemsContainer {
display: flex;
justify-content: center;
align-items: center;
}
.toDiv {
min-width: 30%;
list-style: none;
margin-bottom: 1%;
min-width: 45vh;
display: flex;
justify-content: center;
align-items: center;
}
li {
flex: 1;
margin: 0.5rem;
background: white;
min-height: 2vh;
min-width: 30%;
border-radius: 5px;
font-family: sans-serif;
font-size: 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="header">
<h1 class="title">To Do List</h1>
<BR>
<p class="subtext">This is a project I have worked on from scratch. It was developed with the intent to improve my programming skills.</p>
</div>
<div class="main">
<input id='toDoItem' type="text" placeholder="Todo's"/>
<button id="btnAdd">+</button>
</div>
<div class="itemsContainer">
<!-- <div class="toDoList"> -->
</div>
</div>
<script src="./app.js"></script>
</body>
</html>将flex-direction: column添加到itemsContainer类的css中应该会将它们放在垂直列表中
.itemsContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}