如何阻止移動的元素

我有一個相對簡單的設置，因爲我有一個帶有標籤旁邊的文本框的表單。我也有一個隱藏的圖像，除非驗證檢查失敗。這是什麼樣子的驗證檢查前：如何阻止移動的元素

enter image description here

這裏是什麼樣子，如果驗證檢查失敗：

enter image description here

正如你可以第一個圖片中看到標籤和文本框很好地對齊。然而，在第二個文本框似乎被推下了大約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'; 
}

請有人可以幫我解決這個問題嗎？

來源

2012-05-25 The Crazy Chimp

你嘗試過加入'＃名稱 - 圖像驗證{position：relative;頂部：10px}'？ –

感謝@NiftyDude修復了這個問題！ –

只是讓你有一些接受：

您是否嘗試過，因爲在默認情況下img標籤添加#Name-Image-Validation { position:relative; top:10px }

來源

2012-05-25 10:32:28

這是對齊頂部，只是試試這個：

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

來源

2012-05-25 10:42:36

如何阻止移動的元素

回答

相關問題