将图标与DIV中的输入字段对齐

时间:2018-12-28 13:59:58

标签: html css

如何使方形图标与输入字段保持一致?

<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%"

有什么建议吗?

1 个答案:

答案 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;
}