javascript - jQuery附加的两个输入不在同一行上对齐

我正在处理一个表单页面，用户必须至少插入两个字段：名称和价格。所以我用一个div来管理它，这个div包含一个标签（用于字段名）和一个输入项（用于字段值）。
字段名和字段值必须在同一行。
字段名必须在左侧的有限宽度div中，而字段值必须在右侧并在所有行上展开。
用户必须能够通过单击加号按钮添加字段。
这是HTML：

<div class="product-attributes">
    <div class="product-attribute">
        <label class="field-name">Name</label><input class="field-value" type="text" name="name">
    </div>
    <div class="product-attribute">
        <label class="field-name">Price</label><input class="field-value" type="text" name="price">
    </div>
</div>
<div class="product-attribute-add">
    <label class="product-attribute-add-label">+</label>
</div>

这是CSS：

.product-attributes {
    width: 100%;
    margin: 0;
    padding: 0;
}

.product-attribute {
    display:table;
    width:100%
}

label,
.field-name {
    display:table-cell;
    margin: 0;
}

.product-attribute .field-name {
    width: 80px;
}

.product-attribute-add-label {
    margin: 0;
}

.field-value,
input[type="submit"] {
    display:table-cell;
    width: 100%;
    margin: 0; ...
}

当用户单击加号标签时，我会附加一个新的div：

addField = function() {
    var attributeName = 'NEW';
    $(this).parent().siblings('.product-attributes').append(
        '<div class="product-attribute">'
        + '<input class="field-name" type="text" value="' + attributeName.charAt(0).toUpperCase() + attributeName.slice(1) + '"/>'
        + '<input class="field-value" type="text" name="' + attributeName + '"/>'
        + '</div>'
        );
}
$('label.product-attribute-add-label').click(addField);

为什么他们不在同一条线上？我什么都试过了，但做不到。如果我用一个标签在一个dive中切换第一个输入，它们在同一行上，但是我不能用两个输入来切换。

最佳答案

我建议使用flexbox而不是CSS表。

.product-attribute {
  display: flex;
}

.field-name {
  flex: 0 0 80px;
  max-width: 80px;
}

.field-value {
  flex: 1;
}

片段

addField = function() {
  var attributeName = 'NEW';
  $(this).parent().siblings('.product-attributes').append(
    '<div class="product-attribute">' + '<input class="field-name" type="text" value="' + attributeName.charAt(0).toUpperCase() + attributeName.slice(1) + '"/>' + '<input class="field-value" type="text" name="' + attributeName + '"/>' + '</div>'
  );
}
$('label.product-attribute-add-label').click(addField);

* {
  box-sizing: border-box;
}

.product-attribute {
  display: flex;
}

.field-name {
  flex: 0 0 80px;
  max-width: 80px;
}

.field-value {
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-attributes">
  <div class="product-attribute">
    <label class="field-name">Name</label>
    <input class="field-value" type="text" name="name">
  </div>
  <div class="product-attribute">
    <label class="field-name">Price</label>
    <input class="field-value" type="text" name="price">
  </div>
</div>

<div class="product-attribute-add">
  <label class="product-attribute-add-label">+</label>
</div>

关于javascript - jQuery附加的两个输入不在同一行上对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48266305/