JavaScript对齐附加字段

JavaScript对齐附加字段,javascript,css,Javascript,Css,我在JavaScript、HTML和CSS中得到了一个关于表单的代码,其中有一个“name”字段和“value”字段水平对齐,然后我得到了一个将添加字段的JS代码 当我添加一个字段时,问题就开始了,添加的字段是垂直的,我希望它像我的第一个表单一样是水平的。这是我的密码 <script> var counter = 1; var limit = 8; function addInput(divName){ if (counter == limit) {

我在JavaScript、HTML和CSS中得到了一个关于表单的代码,其中有一个“name”字段和“value”字段水平对齐,然后我得到了一个将添加字段的JS代码

当我添加一个字段时,问题就开始了,添加的字段是垂直的,我希望它像我的第一个表单一样是水平的。这是我的密码

<script>
 var counter = 1;
 var limit = 8;
 function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newName = document.createElement('div');
          newName.innerHTML = "Name "  + "<input type='text' name='myName[]'>";
          document.getElementById(divName).appendChild(newName);

          var newValue = document.createElement('div');
          newValue.innerHTML = "Value " + "<select name='myValue[]' ><option   value='1 '>1</option></select>";
          document.getElementById(divName).appendChild(newValue);

       }
     } 
</script>

<div class="form-style-6" id="dynamicField">
    <h1>Case Number</h1>
    <form method="post" action="getpost.php">
    Name<input type="text" name="myName[]" placeholder="Name" />

    Value<select name="myValue[]">
    <option value="Excellent ">Excellent</option>
    <option value="Good ">Good</option>
    <option value="Ok ">Ok</option>
    <option value="Poor">Poor</option>
    <option value="Bad">Bad</option>
    </select>
</div>
<div class="form-style-6">
  <input type="button" value="Add Fields" onClick="addInput('dynamicField');">
  <input type="submit" value="Send" />
</div>
</form> 

您可以添加
display:inline block
,它将使标签和输入字段垂直对齐

label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}

没有效果。我认为这是在js下。当我使用style.display=“inline”时,它可以工作;代码
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}