Javascript createElement并添加className填充don'不起作用

Javascript createElement and adding className padding don't work

本文关键字：不起作用 don 填充 createElement 添加 className Javascript      更新时间：2023-09-26

当我添加padding-:20px时，它不起作用。我无法形成问题并在谷歌上搜索。没有与我的问题相匹配的结果。至少有人能给我提供一个链接来解释我面临的问题吗？

我还想把文本居中。

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);
	
	
}
.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;
}
<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>

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

我按照的要求将text-align: center;添加到.task-text以居中文本

我通过添加margin: 30px auto 0; 更改了.center

我把#taks-input改成了#task-input，因为它困扰了我

顺便说一句，.task只有100像素高。你计划有两项以上的任务吗？

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);
	
	
}
.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;
}
<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>

相关文章：