html - フォームのフローを中断することなく、入力フィールドの前にアイコンを追加します

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>

これを示すJSFiddleを作成しました。

Answer 3

テキストボックス自体のサイズを変更できます。

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