如何对齐待办事项列表的复选框？HTML/CSS/JS项目技术求助

嘿，我来帮你搞定这个复选框位置的问题！你现在遇到的情况是因为在JavaScript里，你先给<li>设置了文本内容，然后才把复选框追加到这个<li>元素里——DOM元素的渲染顺序是按照它们被添加的顺序来的，所以文本在前，复选框就自然跑到右边去啦。

下面给你两种简单的解决方法，选哪种都可以：

方法一：调整DOM元素的创建顺序 #

直接在JavaScript里先添加复选框，再添加待办文本，这样复选框就会自然出现在文本左边。修改你的printInput函数：

function printInput() { 
  var toDoInput = document.getElementById("textbox").value; 
  var para = document.createElement("li"); 
  // 先创建并添加复选框
  var checkBox = document.createElement("input"); 
  checkBox.type = "checkbox"; 
  checkBox.className = "cb"; 
  para.appendChild(checkBox);
  // 再添加文本内容
  para.append(toDoInput); // 这里用append而不是innerText，避免覆盖之前添加的复选框
  document.getElementById("paragraph").appendChild(para); 
}
function enter() { 
  if (event.keyCode === 13) { 
    document.getElementById("enterButton").click(); 
  } 
}

方法二：用CSS flex布局调整顺序 #

你的<li>已经设置了display: flex，利用flex的order属性可以轻松调整元素的排列顺序，不需要修改JS代码。给你的复选框类.cb加个样式：

.container { 
  border-style: dashed; 
  border-width: 4px; 
  display: flex; 
  flex-flow: column wrap; 
  align-items: center; 
  justify-content: center; 
  margin: auto; 
  width: 40%; 
  padding-bottom: 20%; 
}
li { 
  list-style-type: none; 
  display: flex; 
  border-bottom: 1px solid #cfcbcc;
  align-items: center; /* 可选：让复选框和文本垂直居中对齐 */
}
#paragraph { 
  width: 100%; 
  clear: both; 
  margin: 0; 
  padding: 8px 0 8px 10px; 
}
.container { 
  width: 500px; 
  clear: both; 
  display: table; 
}
h1 { 
  text-align: center; 
}
/* 新增的复选框样式 */
.cb {
  order: -1; /* 让复选框排在flex容器的最前面 */
  margin-right: 8px; /* 可选：给复选框和文本之间加一点间距 */
}

另外注意你的HTML里enterButton有重复的id属性，这个要去掉一个，不然可能会有选择器问题：

<h1> What will you do today? </h1>
<div class="container">
<input class="inputBox" id="textbox" type="text" onkeypress="enter()" placeholder="Bake a cake">
<input onclick="printInput()" class="inputBox" id="enterButton" type="button" value="Enter">
<ul id="paragraph"></ul>
</div>

这样调整之后，复选框就会乖乖左对齐啦！

内容的提问来源于stack exchange，提问作者jyorien