html - 在 html 中添加行时似乎缺少 css

Question

我使用 form:form 来绑定每个输入（java spring）。我在 html 中有一组默认行

<div class="del-form-group" id="itemRow-${cnt.index}">
    <form:input type="text" path="somepath" id="somepath" name="somepath" class="form-control del-input text-center del-input-text-item prodDate" style="width:10%;" disabled="true"/>
-- more input but will omit as redundant and the same except for path,id and name
</div>

和按钮

<button type="button" class="btn btn-success" id="addRow">Add Row</button>

jquery 添加新行

    $('#itemRow-' + currentRow).after('<div class="del-form-group" id="itemRow-'+i+'">'
            +'<input type="text" id="somepath" name="somepath" class="form-control del-input text-center del-input-text-item prodDate" >'
            -- more input but will omit as redundant and the same except for path,id and name
    +'</div>');

我在添加行时没有问题，它工作得很好，但 css 似乎没有正确加载。下面是截图

从这里你可以看到添加的行都被挤在一起了，即使我在添加行时使用了同一个类。知道为什么吗？

.del-input {
  border-radius: 0;
  height: calc(.5em + .75rem + 7px);
  border: 1px solid #d1d3e2;
  font-size:14px;
 }

.del-input-text-item {
  padding-right: 0rem;
  padding-left: 0rem;
  display: inline-block;
  margin-right: -1px;
}

标签： htmlcss

Answer 1

使固定。问题是

margin-right: -1px;

添加行时似乎无法读取负值。相反，我使用

margin-left: 2px;

并且添加的行现在与现有行正确对齐。