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

Question

我正在处理一个表单页面，用户必须在其中至少插入两个字段:名称和价格。因此，我使用包含标签(用于字段名称)和输入项(用于字段值)的 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);

为什么他们不在同一条线上？我尝试了一切，但我做不到。如果我在带有标签的潜水中切换第一个输入，它们在同一行上，但我不能用两个输入来做到这一点。

Answer 1

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

.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>