用 JS 创建的元素不会换行答案

【问题标题】：Elements created with JS are not going on to a new line用 JS 创建的元素不会换行
【发布时间】：2022-01-15 21:06:14
【问题描述】：

所以我一直在为我的第一个项目做一个待办事项清单。我制作了一个按钮，可以使用用户输入创建一个新的 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>

【问题讨论】：

<li> 是 <div> 的无效子代。只允许在<ul> 或<ol>
YouTube 上的 DevEd 将其包含在一个 div 中。那还需要做一个ul吗？
我会相信 <li> documentation 而不是 youtube 上一些不知名的黑客。我忘了它在<menu> 中也有效
见HTML spec

标签： javascript html css

【解决方案1】：

将flex-direction: column 添加到您的 itemsContainer 类的 css 中应该将它们放在垂直列表中

.itemsContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

【讨论】：

谢谢，这帮助我尝试了几个小时哈哈！
没问题！默认的 flex-direction 是 'row' 所以如果不指定 'column' 子元素只会并排放置。
@Ryjonzy 如果此答案对您有所帮助，请务必accept 它以帮助任何未来的观众