Javascript 动态创建的Div未对齐

我在表单上创建了一个按钮，可以动态添加输入。 我使用了这个网站上的教程，并在帮助下找到了如何基本对齐div的方法。然而，现在每当我创建新行时，当我将表单放在一起时，我的第二个和第三个输入似乎永远不会对齐

有人能帮我找出为什么复制不是真正的复制，或者如何定位div中的元素吗

代码笔

HTML：
教学经验*
CSS:
按钮
{
高度：20px；
宽度：20px；
背景：无；
左边距：10px；
边缘顶部：30px；
边缘底部：25px；
}
输入[type=“button”]
{
高度：20px；
宽度：20px；
背景：无；
边框：1px实心#ccc；
大纲：无；
左边距：20px；
}
输入[type=“button”]：焦点
{
大纲：无；
}
标签
{
左边距：145px；
页边顶部：1px；
字体：斜体；
字号：17.5px；
颜色：#859cad；
文本对齐：右对齐；
高度：20px；
宽度：30px；
右边距：30px；
}
三行输入法
{
左边距：18px；
背景：无；
边界：无；
边框底部：1px实心#b3c1cc；
宽度：150px；
边缘底部：30px；
}
#左
{
左边距：340px；
}
JS:
var i=0；
函数addJob（）
{
i++；
var div=document.createElement（“div”）；
div.innerHTML=''；
document.getElementById（“先前的教学经验”）.appendChild（div）；
};

对于保存输入的整个div，您有

#left{margin left:340px；}

将其推到左侧，但是输入本身上的类应该继承no？您在顶部行的

s之间有空格（lol），并且在创建的div之间没有空格。另外，

左边距：340px

对小屏幕非常不好（试试看）对于保存输入的整个div来说，您有

#left{margin left:340px；}

是的，将其推到左边，但是输入本身上的类应该继承否？在顶行的

之间有空格（lol）而且，在创建的页面之间没有空格。而且，

左边距：340px

对于小屏幕来说非常糟糕（试试看）

HTML:
  <div class="input-group" id="previousTeachingExperience">
                    <label id="teachingExpierience">Teaching Experience *</label>

                    <input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
                    <input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
                    <input type="text" class="three-lines" name="years_1" />
                    <input type="button" name="myButton" onclick="addJob()" value="+" />

CSS:

button
{
    height: 20px;
    width: 20px;
    background: none;
    margin-left: 10px;
    margin-top: 30px;
    margin-bottom: 25px;
}

input[type="button"]
{
    height: 20px;
    width: 20px;
    background: none;
    border: 1px solid #ccc;
    outline: none;
    margin-left: 20px;
}

input[type="button"]:focus
{
   outline: none;
}

label
{
    margin-left: 145px;
    margin-top: 1px;
    font-style: italic;
    font-size: 17.5px;
    color: #859cad;
    text-align: right;
    height: 20px;
    width: 30px;
    margin-right: 30px;

}

input.three-lines
{
    margin-left: 18px;
    background: none;
    border: none;
    border-bottom: 1px solid #b3c1cc;
    width: 150px;
    margin-bottom: 30px;
}

#left
{
    margin-left: 340px;
}

JS:

var i = 0;
function addJob()
{
    i++;
    var div = document.createElement("div");
    div.innerHTML = '<div id="left"><input type="text" class="three-lines" name="schoolBoard_'+i+'"><input type="text" class="three-lines" name="position_'+i+'"><input type="text" class="three-lines" name="years_'+i+'"></div>';

    document.getElementById("previousTeachingExperience").appendChild(div);
};