0

我有带有 jQ​​uery 验证的输入，并且我正在插入图像，当需要输入时，它会增加一些边距，并移动我的 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;
 }
4

2 回答 2

2

（从问题评论中复制）

尝试使用包含验证标记图像position: absolute的s。label这样他们就不会参与正常的布局并在您需要显示/隐藏它们时更新它。

于 2012-08-07T14:40:26.313 回答
1

随意放置它，并为其赋予 css 样式visibility:hidden;，使其成为文档流的一部分，同时隐藏它直到您需要它。然后，当你需要它时，使用 jQuery（或任何你想使用的东西——jQuery 最简单）来取消隐藏它。

于 2012-08-07T14:19:53.287 回答