如何使方形图标与输入字段保持一致?
<td>
<div class="" id="calc_mat_prijs_pkg_div['.$y.'][]">
<input type="number" step="0.01" class="form-control no-border input-sm" id="calc_mat_prijs_pkg['.$y.'][]" name="calc_mat_prijs_pkg[]" value="" style="text-align: right" onkeyup="validate(this, '.$y.')">
<span class="" id="calc_mat_prijs_pkg_glyp['.$y.'][]"></span>
<span id="calc_mat_prijs_icon['.$y.'][]" class="fas fa-square"></span>
</div>
</td>
我尝试将输入字段的宽度更改为70%,但该图标仍显示在输入字段下方。
style="text-align: right"
至style="text-align: right; width:70%"
有什么建议吗?
答案 0 :(得分:0)
我的解决方案将position:relative;
应用于父div
,并将position:absolute;
应用于span
。请参阅下面的HTML和CSS。我在CSS中评论了该图标在number
输入中还是使用margin-left:25px;
左移。我希望这会有所帮助。
HTML
<table>
<tr>
<td>
<!-- Added class of field to the div -->
<div class="field" id="calc_mat_prijs_pkg_div['.$y.'][]">
<input type="number" step="0.01" class="form-control no-border input-sm" id="calc_mat_prijs_pkg['.$y.'][]" name="calc_mat_prijs_pkg[]" value="" style="text-align: right" onkeyup="validate(this, '.$y.')">
<span class="" id="calc_mat_prijs_pkg_glyp['.$y.'][]"></span>
<!-- Added class of icon to the span -->
<span id="calc_mat_prijs_icon['.$y.'][]" class="icon fas fa-square"></span>
</div>
</td>
</tr>
</table>
CSS
.field {
position:relative;
}
span.icon {
position:absolute;
top:5px;
left:5px;
}
input {
// Remove this margin if you would like the icon inside of the number input
margin-left:25px;
}