Javascript createElement并添加className padding不起作用

Question

当我添加padding-:20px时，它无效。 我无法在谷歌上形成问题和搜索。没有结果符合我的问题。至少有人能给我一个链接来解释我面临的问题吗？

我也想把文字集中在一起。

＆＃13;

＆＃13;

var btn = document.getElementById("add-task");
btn.onclick = addingText


function addingText (list, itemTexts) {
	
	var input = document.getElementById("taks-input").value;
	var itemTexts = input;
	
    
    var taskList = document.createElement("span");
	taskList.className = "center";
    taskList.innerHTML = itemTexts;
    
   var list = document.getElementById("taskContent");
    list.appendChild(taskList);
	
	
}

＆＃13;

.chack {
    background-color: #4c4b62;
    height: 100%;
    width: 40px;     
}

.task-text {
    background-color: #55566e;
    height: 100%;
    width: 250px;
    
}

.color {
    width: 5px;
    height: 100%;
    background-color: #fdcd63;
}

.task {
    height: 100px;
}

.chack,.color,.task-text{
    float: left;
}

.add-new-task {
    margin-bottom: 50px;
    height: 50px;
    width: 300px;
    background-color: rgb(85, 86, 110);
    padding-top: 30px;
    padding-left: 15px;
}


.center{
	padding-top: 30px;
}

＆＃13;

<div class="container">
<div class="add-new-task">
   <input type="text" id="taks-input">
   <button id="add-task">Add New Task</button>
</div>
   
    <div class="task">
        <div class="col-3 chack"></div>
        <div class="col-8 task-text" id="taskContent"></div>
        <div class="col-1 color"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据epascarello的说法，我将var taskList = document.createElement("span");更改为var taskList = document.createElement("div");

我已将text-align: center;添加到.task-text以按要求为中心文本

我通过添加.center

更改了margin: 30px auto 0;

我将#taks-input更改为#task-input因为它困扰了我。 ：P

顺便说一下.task只有100px高。你打算有两个以上的任务吗？

＆＃13;

＆＃13;

var btn = document.getElementById("add-task");
btn.onclick = addingText


function addingText (list, itemTexts) {
	
	var input = document.getElementById("task-input").value;
	var itemTexts = input;
	
    
    var taskList = document.createElement("div");
	taskList.className = "center";
    taskList.innerHTML = itemTexts;
    
   var list = document.getElementById("taskContent");
    list.appendChild(taskList);
	
	
}

＆＃13;

.chack {
    background-color: #4c4b62;
    height: 100%;
    width: 40px;     
}

.task-text {
    background-color: #55566e;
    height: 100%;
    width: 250px;
  text-align: center;
    
}

.color {
    width: 5px;
    height: 100%;
    background-color: #fdcd63;
}

.task {
    height: 100px;
}

.chack,.color,.task-text{
    float: left;
}

.add-new-task {
    margin-bottom: 50px;
    height: 50px;
    width: 300px;
    background-color: rgb(85, 86, 110);
    padding-top: 30px;
    padding-left: 15px;
}


.center{
    margin: 30px auto 0;
}

＆＃13;

<div class="container">
<div class="add-new-task">
   <input type="text" id="task-input">
   <button id="add-task">Add New Task</button>
</div>
   
    <div class="task">
        <div class="col-3 chack"></div>
        <div class="col-8 task-text" id="taskContent"></div>
        <div class="col-1 color"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;