javascript - 整齐地对齐动态输入

Question

我最近一直在研究一个可以动态添加、复制和删除一行输入的表单。但对齐它们并不是那么容易。

这是问题的说明。

HTML:

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button id="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
    </div>
</form>

CSS:

#add {
    float: left;
}

jQuery:

jQuery(document).ready(function () {
    'use strict';
    var input = 1,
        blank_line = $('.input_line').clone();

    $('#add').click(function () {
        $('form').append(blank_line.clone());
        $('.input_line').last().before($(this));
    });

    $('form').on('click', '.remove', function () {
        $(this).parent().remove();
        $('.input_line').last().before($('#add'));
        input = input - 1;
    });

    $('form').on('click', '.duplicate', function () {
       $(this).parent().after($(this).parent().clone());
       $('.input_line').last().before($('#add'));
       input = input + 1;
    });
});

最简单的方法是什么？任何帮助将不胜感激!

JSFiddle

Answer 1

如果您想保持相同的代码结构，请在您的 CSS 中添加以下类，

.input_line {
  margin-left: 80px;
}

这是更新后的 fiddle 。 http://jsfiddle.net/23z60s1q/2/

让我知道这是否适合您。