對齊動態生成的表單域

Question

我有一個表單，有一些字段，然後由jquery生成一些。問題是新的不符合現有的。我試着擺弄CSS，但沒有奏效。這是正是這傢伙的問題，但他沒有得到迴應：

https://stackoverflow.com/questions/9218225/dynamically-generated-jquery-table-row-not-aligning-correctly

這是我的形式：

<form id="recipe" name="recipe" action="create.php" method="post"> 
    <h2>Ingredients</h2> 
    <div id="labels">    
     <label class="label" for="quantity">Quantity:</label> 
     <label class="label" for="unit">Unit:</label> 
     <label class="label" for="ingredient">Ingredient:</label> 
    </div> 

    <div id="inputs"> 
     <div class="fields"> 
      <input class="quantity" name="quantity[]" type="text" /> 
      <input class="unit" name="unit[]" type="text" /> 
      <input class="ingredient" name="ingredient[]" type="text" /> 
     </div> 
    </div> 

    <div id="container"> 
     <a id="add" href="#"><span>» Add ingredient.</span></a> 
    </div>    

    <div> 
     <h2>Directions</h2> 
     <textarea name="preparacion" rows="10" cols="51"></textarea> 
    </div> 

    <input type="submit" value="Guardar" /> 
    <input type="reset" value="Limpiar" /> 
</form> 

，這是JS我使用生成附加字段：

 var count = 0; 
     $(function(){ 
     $('a#add').click(function(){ 
       count += 1; 
       $('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /><input class="unit" name="unit[]" type="text" /><input class="ingredient" name="ingredient[]" type="text" /></div>'); 
}); 
}); 

但是，結果如下：

（請在空格去掉，它不會讓我張貼圖片）

Answer 1

的問題是，輸入的原始行中你有一個新行分開輸入或空格字符，當您添加新行時，您將所有代碼附加在一起，並呈現一個更接近前一個輸入的輸入。

簡單的解決方案，在JS代碼每個輸入後添加空間：

var count = 0; 
    $(function(){ 
    $('a#add').click(function(){ 
      count += 1; 
      $('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /> <input class="unit" name="unit[]" type="text" /> <input class="ingredient" name="ingredient[]" type="text" /></div>'); 
});` 

Answer 2

添加輸入之間的空間？

$('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /> <input class="unit" name="unit[]" type="text" /> <input class="ingredient" name="ingredient[]" type="text" /></div>');