Javascript 如何将复选框、列表和删除按钮隔开

我做了一个待办事项列表，所有的功能都可以工作，但我不知道如何在输入和删除按钮之间加空格，然后像复选框一样对齐删除按钮。在输入了很多信息之后，整个列表看起来很混乱

var-inputItem=document.getElementById（“inputItem”）；
inputItem.focus（）；
//将输入项添加到列表中
函数附加项（列表、输入）{
var inputItem=this.inputItem；
var list=document.getElementById（列表）；
var listItem=document.createElement（“li”）；
//配置删除按钮
var deleteButton=document.createElement（“button”）；
deleteButton.innerText=“X”；
deleteButton.addEventListener（“单击”，函数（）{
this.parentElement.style.display='none'；
});
//配置复选框
var checkBox=document.createElement（“输入”）；
checkBox.id=“check”；
checkBox.type='checkBox'；
checkBox.addEventListener（'change'，function（））{
labelText.style.textDecoration=checkBox.checked？'line-through'：'none'；
});
//配置标签
var label=document.createElement（“标签”）；
var labelText=document.createElement（“span”）；
labelText.innerText=input.value；
//将复选框和标签文本放入标签元素
label.appendChild（复选框）；
label.appendChild（labelText）；
//将标签（内有复选框）和删除
//按钮插入列表项。
listItem.appendChild（标签）；
listItem.appendChild（deleteButton）；
list.appendChild（listItem）；
inputItem.focus（）；
inputItem.select（）；
返回false；
}
setItem（“list”，list）；
localStorage.getItem（“列表”）.forEach（函数（列表）{
elem.textContent=列表；
});
正文{
文本对齐：居中；
}
形式{
显示：内联块；
}
#外层{
填充：30px；
文本对齐：居中；
}
#内底{
保证金：自动；
宽度：200px；
高度：100px；
}
保险商实验室{
填充：0；
保证金：0；
}
ulli{
位置：相对位置；
填充：12px 8px 12px 40px；
背景：rgb（148160181）；
列表样式类型：无；
字号：18px；
}
#提交{
位置：绝对位置；
填充：10px 16px；
}
/*为输入设置样式*/
输入{
保证金：0；
边界：无；
边界半径：0；
填充：10px；
浮动：左；
字体大小：16px；
}

待办事项清单

var inputItem=document.getElementById（“inputItem”）；
inputItem.focus（）；
//将输入项添加到列表中
函数附加项（列表、输入）{
var inputItem=this.inputItem；
var list=document.getElementById（列表）；
var listItem=document.createElement（“li”）；
//配置删除按钮
var deleteButton=document.createElement（“按钮”）；
deleteButton.innerText=“X”；
deleteButton.addEventListener（“单击”，函数（）{
this.parentElement.style.display='none'；
});
//配置复选框
var checkBox=document.createElement（“输入”）；
checkBox.id=“check”；
checkBox.type='checkBox'；
checkBox.addEventListener（'change'，function（））{
labelText.style.textDecoration=checkBox.checked？'line-through'：'none'；
});
//配置标签
var label=document.createElement（“标签”）；
var labelText=document.createElement（“span”）；
labelText.innerText=input.value；
//将复选框和标签文本放入标签元素
label.appendChild（复选框）；
label.appendChild（labelText）；
//将标签（内有复选框）和删除
//按钮插入列表项。
listItem.appendChild（标签）；
listItem.appendChild（deleteButton）；
list.appendChild（listItem）；
inputItem.focus（）；
inputItem.select（）；
返回false；
}
setItem（“list”，list）；
localStorage.getItem（“列表”）.forEach（函数（列表）{
elem.textContent=列表；
});
我们又见面了。问题的一部分是你把所有的东西都放在中心位置，这会让你的风格脱节。除您的
#outerDiv
外，我移除了定心。然后，我在复选框的右边留了一点空白，这样它们就不会坐得太近了。最后，我将按钮向右浮动，以便它们始终正确对齐


var-inputItem=document.getElementById（“inputItem”）；
inputItem.focus（）；
//将输入项添加到列表中
函数附加项（列表、输入）{
var inputItem=this.inputItem；
var list=document.getElementById（列表）；
var listItem=document.createElement（“li”）；
//配置删除按钮
var deleteButton=document.createElement（“按钮”）；
deleteButton.innerText=“X”；
deleteButton.addEventListener（“单击”，函数（）{
this.parentElement.style.display='none'；
});
//配置复选框
var checkBox=document.createElement（“输入”）；
checkBox.id=“check”；
checkBox.type='checkBox'；
checkBox.addEventListener（'change'，function（））{
labelText.style.textDecoration=checkBox.checked？'line-through'：'none'；
});
//配置标签
var label=document.createElement（“标签”）；
var labelText=document.createElement（“span”）；
labelText.innerText=input.value；
//将复选框和标签文本放入标签元素
label.appendChild（复选框）；
label.appendChild（labelText）；
//将标签（内有复选框）和删除
//按钮插入列表项。
listItem.appendChild（标签）；
listItem.appendChild（deleteButton）；
list.appendChild（listItem）；
inputItem.focus（）；
inputItem.select（）；
返回false；
}
//setItem（“list”，list）；
//localStorage.getItem（“列表”）.forEach（函数（列表）{
//elem.textContent=列表；
//});
body{}
形式{
显示：内联块；
}
#外层{
填充：30px；
文本对齐：居中；
}
#innerDiv{
保证金：自动；
宽度：200px；
高度：100px；
}
保险商实验室{
填充：0；
保证金：0；
}
ulli{
职位：