整齐地调整动态输入

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

这是更新的小提琴。 http://jsfiddle.net/23z60s1q/2/

请告诉我这是否适合您。

Answer 2

绝对定位按钮：

#add {
    left: -100px;
    position: absolute;
    width: 100px;
}

form {
    margin-left: 100px;
    position: relative;
}

http://jsfiddle.net/5tLqv003/