在输入字段前添加一个图标，而不会中断表单的流程

Question

好的，我有一个图标，当我放在一个输入前面时，它将输入向右推5个像素左右，因此，将视野从视觉对齐中抛出。有没有我可以投入的风格：在输入之前还是可以使图标在左侧移动的东西？我的HTML看起来像这样：

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

Answer 1

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

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

Answer 2

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

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

我创建了一个demonstrates this。

的JSFiddle

Answer 3

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

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