如何将HTML元素准确地定位在您想要的位置

How to position a HTML element exactly where you want it?

本文关键字：位置 定位 HTML 元素      更新时间：2023-09-26

https://jsfiddle.net/5mkt6ucr/

<div class="pwordCheck">
            <label>Password </label> <input type="password" id="pword" data-placement="right" title="" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
            <label>Confirm Password </label>  <input type="password" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="left" title="" data-original-title="Passwords must match" class="mytooltip">
            <span id="themessage" class="themessage"></span><br> 
        </div>

在我的jsfiddle中可以看到，一旦您开始输入密码并确认密码，就会弹出一条消息。然而，该消息将输入字段向左分流。我想知道你是如何定位的，这样它就可以在不改变字段的情况下弹出。我试过做位置：绝对/相对等，也试过改变宽度，所以我觉得它在挤压它。但没有用。有人找到解决方案了吗？感谢

只需将#firstformspan的css属性从相对更改为绝对作为

#firstform span{
    position: absolute;
}

更新：

小提琴：https://jsfiddle.net/5mkt6ucr/14/

对于搜索按钮图像，添加属性作为

.glyphicon-search
{
   position:relative !important;
}

它不能解决css的问题，但也许它还可以。我添加了'<br>'

}else if (password1.value == confpword1.value){
        confpword1.style.backgroundColor = gbc;
        themsg.style.backgroundcolor 
        themsg.innerHTML = "<br>Passwords match";
    }else{
        confpword1.style.backgroundColor = bbc;
        themsg.style.color = gc;
        themsg.innerHTML = "<br>Passwords do not match";        
    }

使用text-align:center；

如果您将text-align:center;从#firstform中移除，您将看到一切看起来都很好。

要使#firstform居中，请尝试以下操作：
margin: 0 auto;
或
left:-50%;+margin-left:-(width/50)

请注意，对于这些居中选项，您的元素需要硬宽度，因此您不能使用width:100%;。

您的CSS

#firstform span{
    position: absolute;
}

只需像这样更改CSS。。。

#firstform .themessage{
    position: absolute;
}

无需更改CSS位置代码。您也可以使用此代码。您的jsfiddle代码已编辑单击此处

if(confpword1.value == ''){
        confpword1.style.background = empty;
    }else if (password1.value == ''){
        confpword1.style.background = empty;
    }else if (password1.value == confpword1.value){
        confpword1.style.backgroundColor = gbc;
        themsg.style.backgroundcolor 
        themsg.innerHTML = '<div class="passerror">Passwords match<div>';
}else{
    confpword1.style.backgroundColor = bbc;
    themsg.style.color = gc;
    themsg.innerHTML = '<div class="passerror">Passwords do not match</div>';       
}
相关文章：