如何阻止元素移动 [英] How to stop elements moving around

问题描述

我有一个相对直接的设置，我有一个带有标签的文本框旁边的窗体。我还有一个图像是隐藏的，除非验证检查失败。这是验证检查之前的样子：

$ b

如果验证检查失败，则显示如下：

img src =https://i.stack.imgur.com/Qsnhm.pngalt =enter image description here>

正如你在第一个图像的标签和文本框是很好地对齐。但是，在第二个文本框中，文本框显示为下推大约10px。

这是问题所在。我已经尝试了大量的修复，以排序这个问题，但我只是可以让一切保持在它是（并行）。

这里是HTML代码：

 < ol class =forms> 
< li> 
< label for =Name> Name *< / label> 
< input type =textname =nameid =Name/> 
< img src =/ Graphics / Other / Name-Alert.pngclass =validateImageid =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;显示：block;背景：无; 
} 
 
输入{
 width：250px; margin：0 0 16px 10px; 
 border：1px #bbb solid; padding：5px;背景：无;颜色：#FFF; 
} 
 
 select {margin-bottom：20px; } 
 
 .clear {clear：both; } 
 
 .validateImage {display：none; } 
  

最后这里是我用来验证表单的一小部分javascript：

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

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

解决方案

只有这样您才能接受：

您尝试添加＃Name-Image-Validation {position：relative; top：10px}

I have a relativly straightforward setup in that I have a form with a label next to a text box. I also have an image that is hidden unless a validation check is failed. This is what it looks like before the validation check:

Here is what it looks like if the validation check is failed:

As you can see in the first image the label and text box are nicely aligned. However, in the second one the text box appears to get pushed down by around 10px.

This is where the problem lies. I have tried a whole host of fixes to sort this issue out but I just can get everything to stay where it is (and be in line).

Here is the HTML code:

<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>
...
...

Here is the corresponding CSS code:

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; }

Finally here is the small piece of javascript that I use to validate the form:

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';
}

Please can someone help me fix this issue?

解决方案

Just so that you have something to accept:

Have you tried adding #Name-Image-Validation { position:relative; top:10px }

这篇关于如何阻止元素移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！