jquery - 图像之间需要一致的水平间距

Question

我正在为 this image 的每一行生成以下 HTML :

<div class='row signup'>
  <div class='col-md-1'>
    <span class='plus-icon'>
      <img alt="Plus" src="/assets/plus.jpg" width="18" height="18" />
    </span>
    <span class='minus-icon'>
      <img alt="Minus" src="/assets/minus.jpg" width="18" height="18" />
    </span>
  </div>
  <div class='col-md-2'><input type="text" value="Food" name="sheet[slots_attributes][1][label]" id="sheet_slots_attributes_1_label" /></div>
  <div class='col-md-2'><input type="text" value="" name="sheet[slots_attributes][1][name]" id="sheet_slots_attributes_1_name" /></div>
  <div class='col-md-2'><input type="text" value="foo@foo.com" name="sheet[slots_attributes][1][email]" id="sheet_slots_attributes_1_email" /></div>
  <div class='col-md-2'><input type="text" value="3335557777" name="sheet[slots_attributes][1][phone]" id="sheet_slots_attributes_1_phone" /></div>
  <div class='col-md-2'><input type="text" value="" name="sheet[slots_attributes][1][comments]" id="sheet_slots_attributes_1_comments" /></div>
</div>

在图像中，顶部两行是在 jQuery 中生成的(单击 + 按钮)，底部两行随页面一起呈现。我希望 + 和 - 按钮/图标的间距与它们在原始页面呈现时的间距相同，但对于 jQuery 生成的行无法做到这一点。

我认为问题在于最初呈现的行(顺便说一句，在 Rails/HAML 中，尽管我认为这并不重要)包括来自换行等的额外间距，而 jQuery 行中没有额外的间距。所以从某种意义上说，jQuery 行是“正确的”，只是不美观。请注意，两种情况下的 HTML 在 Firebug 中看起来完全相同。

在两种情况下确保水平间距一致的最佳方法是什么？我想我需要以某种方式设置 spans 或 imgs 的样式，但我卡住了。

Answer 1

尝试填充。如果不行，试试 margin

<img alt="Plus" src="/assets/plus.jpg" width="18" height="18" style="padding:5px;"/>

你也可以使用padding-left, padding-top...如果你想让它只影响一侧