如何阻止元素四处移动

Question

我有一个相对简单的设置，因为我有一个在文本框旁边有标签的表单。除非验证检查失败，否则我还有一个隐藏的图像。这是验证检查之前的样子：

如果验证检查失败，它的样子如下：

正如您在第一张图片中看到的那样，标签和文本框很好地对齐。但是，在第二个文本框中，文本框似乎被推下约10px。

这就是问题所在。我已经尝试了一系列修复来解决这个问题，但我可以让所有东西保持原状（并排成一行）。

以下是HTML代码：

<ol class="forms">
    <li>
        <label for="Name">Name*</label>
        <input type="text" name="name" id="Name" />
        <img src="/Graphics/Other/Name-Alert.png" class="validateImage" id="Name-Image-Validation">
    </li>
...
...

以下是相应的CSS代码：

form ol { list-style-type:none; }

form    { text-align:left; margin:0px;  }

label   { 
        float: left; width: 85px; margin-top:5px;
        text-align:left; display:block; background:none;
        }

input   { 
        width: 250px; margin:0 0 16px 10px;
        border:1px #bbb solid; padding:5px; background:none; color:#FFF;
        }

select { margin-bottom:20px; }

.clear  { clear:both; }

.validateImage  { display:none; }

最后，这是我用来验证表单的一小段javascript：

var x=document.forms["email_form"]["name"].value;
if (x==null || x=="")
{
    document.getElementById('Name-Image-Validation').style.display='inline';
    return false;
}
else
{
    document.getElementById('Name-Image-Validation').style.display='none';
}

有人可以帮我解决这个问题吗？

Answer 1

这是因为默认情况下img标签是对齐的，只需尝试这个：

.validateImage  { display:none; vertical-align: middle; }

Answer 2

这样你才能接受：

您是否尝试过添加#Name-Image-Validation { position:relative; top:10px }