Question

下面有一个表单，其中包含表单元素，如文本输入和验证消息：

$error_user = (!empty($errors['user']))?$errors['user']:"";
$error_email = (!empty($errors['email']))?$errors['email']:"";  

            echo "<form action='./forgotpass.php' method='post'>
            <table>
            <tr>
            <td></td>
            <td id='errormsg'>$errormsg</td>
            </tr>
            <tr>
            <td>Username</td>
            <td><input type='text' name='user' value='$user'/><br/>".$error_user."</td>
            </tr>
            <tr>
            <td>Email</td>
            <td><input type='text' name='email' value='$email'/><br/>".$error_email."</td>
            </tr>
            <tr>
            <td></td>
            <td><input type='submit' name='resetbtn' value='Reset Password' /></td>
            </tr>
            </table>
            </form>";

现在，我在相关文本输入下方显示每条验证消息，但问题是整理。如果我在文本输入下面显示消息，就像我现在正在做的那样，那么文本输入会向上移动一点以占据验证消息的下方空间，这意味着文本输入没有用其标签进行调整，例如Email验证出现时，文本输入与此标签不对齐。

我的问题是，当验证消息出现在

下面时，如何让标签和文本输入保持彼此对齐？

Answer 1

如果您使用此：

echo "<form action='./forgotpass.php' method='post'>
        <table>
        <tr>
        <td></td>
        <td id='errormsg'>$errormsg</td>
        </tr>
        <tr>
        <td valign='top'>Username</td>
        <td valign='top'><input type='text' name='user' value='$user'/><br/>Username Error</td>
        </tr>
        <tr>
        <td valign='top'>Email</td>
        <td valign='top'><input type='text' name='email' value='$email'/><br/>Email Error</td>
        </tr>
        <tr>
        <td></td>
        <td><input type='submit' name='resetbtn' value='Reset Password' /></td>
        </tr>
        </table>
        </form>";

你应该得到你想要的样子。消息扭曲行的原因是因为它正在放大一个单元格，因此带有标签的单元格在中间垂直对齐。注意valign:top？这将把所有东西推到单元格的顶部，这样第一行的行中的所有东西都会排成一行。

请参阅此JSFiddle

Answer 2

将style="vertical-align: top"添加到所有TD代码中。您可能还需要在标签单元格中添加一些填充，以便将它们与输入框中的内容正确对齐。

Answer 3

创建另一个<td>元素，用于显示此编辑

之类的错误消息

<tr>
 <td>Username</td>
 <td><input type='text' name='user' value='$user'/></td>
 <td>".$error_user."</td>
</tr>

Answer 4

另外，除了所提到的一切，如果它没有搞砸你的任何其他东西，我会尝试在空的td中添加一个空格，如下所示：

        <td>&nbsp;</td>
        <td id='errormsg'>$errormsg</td>

它会使事情平等分配

验证出现时如何对齐文本输入和标签

4 个答案: