我正在构建强制性的待办事项列表应用程序并遇到了一个奇怪的样式问题。当我创建我的 li 时，我希望它们显示 inline-flex 和 column，彼此堆叠。但是，当您创建它们时，它们当前会排成一行显示。
我已经玩了很长时间了，但仍然无法弄清楚我是如何无法让它工作的。我已经瞄准了我试图让它工作的每个元素，但它不会正确显示。
有人知道我缺少什么吗？
https://codepen.io/constequalsexcel/pen/ZEGGoLq
function addTodo() {
let node = document.createElement('li');
node.setAttribute('class', 'list-item');
let text = document.getElementById('todo-input').value;
let textnode = document.createTextNode(text);
node.appendChild(textnode);
let deleteButton = document.createElement('button');
let deleteButtonX = document.createTextNode('X');
deleteButton.appendChild(deleteButtonX);
let StrikeThroughRadio = document.createElement('input');
StrikeThroughRadio.setAttribute('type', 'checkbox');
StrikeThroughRadio.addEventListener('click', function(e) {
if (StrikeThroughRadio.checked === true) {
e.target.nextElementSibling.style.textDecoration = 'line-through';
e.target.nextElementSibling.style.color = 'red';
} else {
e.target.nextElementSibling.style.textDecoration = 'none';
e.target.nextElementSibling.style.color = 'black';
}
});
deleteButton.addEventListener('click', function() {
let deleteLI = document.getElementById('display');
deleteLI.removeChild(node);
let RemoveDeleteButton = document.getElementById('display');
RemoveDeleteButton.removeChild(deleteButton);
let RemoveStrikeThroughRadio = document.getElementById('display');
RemoveStrikeThroughRadio.removeChild(StrikeThroughRadio);
});
document.getElementById('display').appendChild(StrikeThroughRadio);
document.getElementById('display').appendChild(node);
document.getElementById('display').appendChild(deleteButton);
}
function ClearInputOnSubmit() {
document.getElementById('todo-input').value = '';
}#header {
display: flex;
justify-content: center;
margin-right: 160px;
}
enter code here ul {
display: inline-flex;
list-style: none;
}
.main {
width: 400px;
display: flex;
justify-content: center;
flex-direction: column;
margin: auto;
}
#display>li {
display: inline-flex;
flex-direction: column;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>To-Do App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="header">TO DO LIST</h1>
<div class="main">
<div class="todo-container">
<ul id="display"></ul>
</div>
<div class="container">
<div>
<input type="text" id="todo-input" />
<input type="button" value="Add ToDo" id="todo-button" onclick="addTodo(); ClearInputOnSubmit()" />
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>最佳答案
根据html标准，只有li允许在 ul 内, 其他元素作为 ul 的子元素是无效的。 Check the doc .
因此，我对您的代码进行了很好的更改，请检查代码段。
function addTodo() {
let node = document.createElement('li');
node.setAttribute('class', 'list-item');
let text = document.getElementById('todo-input').value;
let textnode = document.createElement('span');
textnode.innerText = text;
//node.appendChild(textnode);
let deleteButton = document.createElement('button');
let deleteButtonX = document.createTextNode('X');
deleteButton.appendChild(deleteButtonX);
deleteButton.addEventListener('click', removeNode);
let StrikeThroughRadio = document.createElement('input');
StrikeThroughRadio.setAttribute('type', 'checkbox');
StrikeThroughRadio.addEventListener('click', function(e) {
StrikeThroughRadio.checked ? e.target.nextElementSibling.classList.add('strike-text') :
e.target.nextElementSibling.classList.remove('strike-text')
});
node.appendChild(StrikeThroughRadio)
node.appendChild(textnode);
node.appendChild(deleteButton)
//document.getElementById('display').appendChild(StrikeThroughRadio);
document.getElementById('display').appendChild(node);
//document.getElementById('display').appendChild(deleteButton);
}
function removeNode(e) {
e.target.parentElement.remove()
}
function ClearInputOnSubmit() {
document.getElementById('todo-input').value = '';
}#header {
display: flex;
justify-content: center;
margin-right: 160px;
}
ul {
display: flex;
flex-direction: column;
list-style: none;
}
.main {
width: 400px;
display: flex;
justify-content: center;
flex-direction: column;
margin: auto;
}
#display>li {
display: flex;
flex-direction: row;
}
.strike-text {
text-decoration: line-through;
color: red
}<h1 id="header">TO DO LIST</h1>
<div class="main">
<div class="todo-container">
<ul id="display"></ul>
</div>
<div class="container">
<div>
<input type="text" id="todo-input" />
<input type="button" value="Add ToDo" id="todo-button" onclick="addTodo(); ClearInputOnSubmit()" />
</div>
</div>
</div>关于javascript - 试图让我的 ToDo 列表 <li> 标记显示为一列但无法使其工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60162205/