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

我认为问题源于浏览器默认向input 添加样式 - padding、border、font ...

您可以在父容器上使用display: flex 将元素放在同一行，并使用width 和margin-right 对齐它们。

为了准确，input 需要对width 进行小的调整以考虑其边界。

fiddle

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

.product-attribute {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: .45em;
}

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

.product-attribute .field-name {
  min-width: 80px;
  width: 80px;
  margin-right: 1em;
}

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

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

/* account for the border added to input by defaul */
.product-attribute input.field-name {
  margin-right: calc(1em - 1px);
}

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

Answer 2

我建议使用 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>

Answer 3

CSS 脚手架不正确，你可能想要

product-attributes -> display: table

和

product-attribute -> display: table-cell

现在，product-attribute 是一个 100% 宽度的表格。