我为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
的样式,但我被卡住了。
答案 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}}