Html 将图元放置在外部，但与图元对齐

标题有点模糊，但这是我想要的。我创建了一个登记表。我希望这两条错误消息显示在两个输入框旁边，但在整个表单之外。你在中间看到的一切都在一个水平方向上与中心对齐。p> 我不知道使用top

属性（%）

是否有助于垂直放置它们，但我仍然需要将它们与表单右侧对齐

代码：

<div id="container">
    <div id="container_center">
        <form name="RegForm" method="post" action="/validate_register2.php" onsubmit="getDatum()"> 
            <table class="minden2">
                <tr>
                    <td>
                        <h1 class="title">Register</h1>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cont2">
                            <tr>
                                <td class="hely">
                                    <p><b>Username:</b></p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="username" class="aaa" id="form_username" maxlength="25" value="">
                                </td>
                            </tr>
                            <tr>
                                <td class='reg'>
                                    <p class='le'><b>Password:</b></p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="tooltip" type="password" name="password1" id="form_password1" maxlength="25" value="">
                                </td>
                            </tr>
                            <tr>
                                <td class="reg">
                                    <p class='le'><b>Email:</b></p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="email1" class="i" id="form_email1" maxlength="254" value="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label id="c"><input type="checkbox" name="cb" id="acceptagreement" class="cb" onchange="enableSubmitButton()"/>I have read and 
                                    agreed to the <a href="/termsofuse" class="h_link" target="_blank">Terms of use</a> and <a href="/privacy-policy" class="h_link" target="_blank">Privacy Policy</a>.</label>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="submit">
                        <input type="submit" name="submit" value="Register" id="submit" class="submitbtn"/>
                    </td>
                </tr>
            </table>
        </form>
        <p id='error1' >Error message 1<p>
    </div>
</div>

#container {
border: 0px solid green;
margin:0;
}

#container_center{
border: 0px solid black;
width: 320px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background: #FFFFFF;
padding: 20px;
padding-bottom:15px;
padding-top:0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
}

table.minden2 {
border:0px solid red;
border-collapse: collapse;
margin:0;
text-align:center;
width: 100%;
}

登记
用户名：

密码：
电子邮件：
我读过，也读过
同意和。
错误消息1
#容器{
边框：0px纯绿色；
保证金：0；
}
#货柜中心{
边框：0px纯黑；
宽度：320px；
高度：自动；
显示：块；
左边距：自动；
右边距：自动；
边缘顶端：40px；
背景：#FFFFFF；
填充：20px；
垫底：15px；
填充顶部：0；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
-o-边界半径：10px；
-khtml边界半径：10px；
-webkit盒阴影：0px 10px rgba（0,0,0,0.5）；
-moz盒阴影：0px10pxrgba（0,0,0,0.5）；
盒影：0像素10像素rgba（0,0,0,0.5）；
}
表1.2{
边框：0px实心红色；
边界塌陷：塌陷；
保证金：0；
文本对齐：居中；
宽度：100%；
}

此处提供完整代码：

---

假设错误消息正好出现在相关表单字段之前或之后，您可以将错误消息向右浮动，并给它们一个负的右边距。这将把它们拉到包含div的外部。然后您可以使用错误消息上的上边距来获得您要查找的垂直偏移量。只需确保在包含的div上可以看到溢出，否则当消息向右移动时，您将隐藏消息。

您可以利用这样一个事实，即溢出可以通过禁用换行的行div显示在父div之外

 white-space: nowrap;

以及将容器的宽度固定到所需的量

看这个例子

---

您可以注意到，更改错误消息字段之间的字体大小或间距会保持垂直对齐。

如果您希望两条错误消息显示在两个输入框旁边，但在整个

之外，可以将

标记放在

标记的正外部

---

显示您的代码。

请输入代码。。。但如果每个字段（用户名、密码等）都有一个环绕的div，则将

position:relative

设置为它们。然后将错误消息放在这些div中，并用负数设置

位置：绝对值

，就是这样。很好的解决方案！谢谢大家!+以1为例