如何阻止元素四處移動

Question

我有一個相對簡單的設置，即在文本框旁邊有一個帶有標簽的表單。 我也有一個隱藏的圖像，除非驗證檢查失敗。 這是驗證檢查之前的樣子：

如果驗證檢查失敗，則如下所示：

如您在第一張圖片中所看到的，標簽和文本框對齊良好。 但是，在第二個文本框中，文本框似乎被向下推了10像素。

這就是問題所在。 我已經嘗試了許多修復程序來解決此問題，但是我可以使所有內容保持原樣（並保持一致）。

這是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 } #Name-Image-Validation { position:relative; top:10px }