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