Javascript createElement并在'；行不通

当我添加

填充-：20px

时，它不起作用。 我无法在谷歌上形成问题和搜索。没有与我的问题匹配的结果。至少有人能提供一个链接来解释我面临的问题吗

我还想将文本居中

var btn=document.getElementById（“添加任务”）；
btn.onclick=添加文本
函数添加文本（列表、项目文本）{
var输入=document.getElementById（“taks输入”）.value；
var itemTexts=输入；
var taskList=document.createElement（“span”）；
taskList.className=“中心”；
taskList.innerHTML=项目文本；
var list=document.getElementById（“任务内容”）；
list.appendChild（任务列表）；
}

.chack{
背景色：#4c4b62；
身高：100%；
宽度：40px；
}
.任务文本{
背景色：#55566e；
身高：100%；
宽度：250px；
}
.颜色{
宽度：5px；
身高：100%；
背景色：#fdcd63；
}
.任务{
高度：100px；
}
.chack、.color、.task文本{
浮动：左；
}
。添加新任务{
边缘底部：50px；
高度：50px；
宽度：300px；
背景色：rgb（85,86,110）；
填充顶部：30px；
左侧填充：15px；
}
.中心{
填充顶部：30px；
}

添加新任务

按照epascarello所说的，我更改了

var taskList=document.createElement（“span”）

into

var taskList=document.createElement（“div”）

我添加了
文本对齐：居中至
。任务文本
按要求居中显示文本

我更改了
.center
，添加了
边距：30px自动0

我把
#taks input
改为
#task input
，因为这让我很烦恼P

顺便说一句，
.task
仅为100px高。您是否计划完成两项以上的任务


var btn=document.getElementById（“添加任务”）；
btn.onclick=添加文本
函数添加文本（列表、项目文本）{
var input=document.getElementById（“任务输入”）.value；
var itemTexts=输入；
var taskList=document.createElement（“div”）；
taskList.className=“中心”；
taskList.innerHTML=项目文本；
var list=document.getElementById（“任务内容”）；
list.appendChild（任务列表）；
}
.chack{
背景色：#4c4b62；
身高：100%；
宽度：40px；
}
.任务文本{
背景色：#55566e；
身高：100%；
宽度：250px；
文本对齐：居中；
}
.颜色{
宽度：5px；
身高：100%；
背景色：#fdcd63；
}
.任务{
高度：100px；
}
.chack、.color、.task文本{
浮动：左；
}
。添加新任务{
边缘底部：50px；
高度：50px；
宽度：300px；
背景色：rgb（85,86,110）；
填充顶部：30px；
左侧填充：15px；
}
.中心{
利润率：30px自动0；
}

添加新任务
内联元素不可用；我没有填充物。。。