Question

我在表单上创建了一个动态添加输入的按钮。我使用了本网站上的教程，并在帮助下能够弄清楚如何基本对齐div。然而，现在，每当我创建一个新行时，当我将表单放在一起时，我的第二个和第三个输入似乎从不排成一行。

有人可以帮助我弄清楚为什么重复不是真正的重复或如何定位div中的元素。

CodePen http://codepen.io/theodore_steiner/pen/wzqABa

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

动态创建的Div未对齐

0 个答案: