如何保存插入图像的位置（验证时）？

Question

我有jQuery验证的输入，我在插入图像时，需要输入时，但它会增加一些余量，并移动我的div。

这是我的字段没有验证：

并输入错误：

我尝试了不同的变体：添加z-index，定位，但无法做到这一点。

这是我的html错误：

   <form ... >
   <div class="field3">
 <div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
  </div>
   <div class="pickers"><span id="pickers">To</span>
  <input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>

   </div>
   </div>
    <input name="commit" type="submit" value="Run Report">
   </form>

我的css：

label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
 }
 label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
 color:transparent;
 }
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
 }

Answer 1

（从问题评论中复制）

尝试将position: absolute用于包含验证标记图像的label。这样他们就不会参与正常的布局，只要你需要显示/隐藏它们就会更新它。

Answer 2

根据需要定位它，并为其提供css样式visibility:hidden;，它将保留文档流的一部分，同时隐藏它直到您需要它。然后，当你需要它时，使用jQuery（或你想要使用的任何东西 - 最简单的jQuery）来取消隐藏它。