JavaScript выравнивание дополнительного поля

Question

Я получил код в JavaScript, HTML и CSS о форме с полем «имя» и поле «значение», выравниваемым по горизонтали, после чего я получил код 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> 

На всякий случай. Вот мой CSS:

.form-style-6{ 
    font: 95% Arial, Helvetica, sans-serif; 
    max-width: 600px; 
    margin: 10px auto; 
    padding: 16px; 
    background: #F7F7F7; 
    } 
    .form-style-6 h1{ 
    background: #43D1AF; 
    padding: 20px 0; 
    font-size: 140%; 
    font-weight: 300; 
    text-align: center; 
    color: #fff; 
    margin: -16px -16px 16px -16px; 
    } 
    .form-style-6 input[type="text"], 
    .form-style-6 select 
    { 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    -o-transition: all 0.30s ease-in-out; 
    outline: none; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 39%; 
    background: #fff; 
    margin-bottom: 4%; 
    margin-left: 0.2%; 
    border: 1px solid #ccc; 
    padding: 3%; 
    padding-left: 3%; 
    color: #555; 
    font: 95% Arial, Helvetica, sans-serif; 
    float:center; 



    } 
    .form-style-6 input[type="text"]:focus, 
    .form-style-6 input[type="date"]:focus, 
    .form-style-6 input[type="datetime"]:focus, 
    .form-style-6 input[type="email"]:focus, 
    .form-style-6 select:focus 
    { 
    box-shadow: 0 0 5px #43D1AF; 
    padding: 3%; 
    border: 1px solid #43D1AF; 



    } 

    .form-style-6 input[type="submit"], 
    .form-style-6 input[type="button"]{ 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 100%; 
    padding: 3%; 
    background: #43D1AF; 
    border-bottom: 2px solid #30C29E; 
    border-top-style: none; 
    border-right-style: none; 
    border-left-style: none;  
    color: #fff; 
    } 
    .form-style-6 input[type="submit"]:hover, 
    .form-style-6 input[type="button"]:hover{ 
    background: #2EBC99; 
     } 

Answer 1

можно добавить display: inline-block, который будет иметь метку и поле ввода выровненный по вертикали.

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