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

时间:2015-05-19 19:18:03

标签: jquery html5 css3

我为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中看起来完全相同。

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

2 个答案:

答案 0 :(得分:2)

尝试使用填充。如果它不起作用,请尝试使用margin

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

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

答案 1 :(得分:0)

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

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