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 ...如果你想让它只影响一边

Answer 2

最简单的方法可能是直接在加/减按钮上添加一个类。

<img class="row-signup-button" alt="Plus" src="/assets/plus.jpg" width="18" height="18" />

然后，您可以使用CSS padding-right来分隔按钮：

.row-signup-button {
    padding-right: 10px;
}

这是一个JSFiddle来展示它的外观：{{3}}

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

2 个答案: