html - 在输入字段前添加图标而不中断表单的流程

Question

好的，我有一个图标，当我把它放在输入前面时，它会将输入向右推 5 个像素左右，从而使字段失去视觉对齐。有没有我可以使用的样式：输入之前或可以使图标向左移动一点的样式？我的 HTML 看起来像这样：

<li>
 <label>Date</label>
 <img src="img/cal.png"/>
 <input type="text"/>
</li>

Answer 1

可能来自标记中内联元素和回车之间的隐式空格。试试这个标记格式“技巧”

<li>
 <label>Date</label>
 <img src="img/cal.png"
 /><input type="text"/>
</li>

或全部内联

<li><label>Date</label><img src="img/cal.png" /><input type="text"/></li>

我制作了一个 JSFiddle 来演示这一点。

Answer 2

您可以调整文本框本身的大小：

<input type="text" style="width:40px" />

Answer 3

img在元素上添加 CSS 负边距：

<li>
   <label>Date</label>
   <img src="img/cal.png" style="margin-left: -5px;" />
   <input type="text"/>
  </li>