0

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

$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文本输入未对齐出现验证时的此标签。

我的问题是，当验证消息出现在下方时，如何让标签和文本输入保持一致

4

4 回答 4

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

于 2012-12-11T12:30:17.413 回答
0

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

于 2012-12-11T12:30:47.070 回答
0

创建另一个<td>元素以显示类似此编辑的错误消息

<tr>
 <td>Username</td>
 <td><input type='text' name='user' value='$user'/></td>
 <td>".$error_user."</td>
</tr>
于 2012-12-11T12:31:16.023 回答
0

另外，除了提到的所有内容，如果它没有给你带来任何麻烦，我会尝试在空的 td 中添加一个空格，如下所示：

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

它会让事情平均分配

于 2012-12-11T12:33:48.983 回答