Question

在HTML中，我正在制作一个表格，其中并排有2个表。在一个表中，所有格式为 / Name / E Mail / Password ，而在另一表中，我试图将格式为 text /电子邮件/密码，使它们看起来很好看。

但是当我给标签Message和</text area> </code>时，由于以下原因，我的整个表单布局受到了干扰我无法保持初始标签和输入对齐。</p> <pre> <code> <form class =“” action =“ index.html” method =“ post”> <表格> <tr> <td> <表格> <tr> <td> <label>名称</label> </td> </tr> <tr> <td> <label>电子邮件</label> </td> </tr> <tr> <td> <label>密码</label> </td> </tr> <tr> <td> <label>消息</label> </td> </tr> </table> </td> <td> <表格> <tr> <td> <input type =“ text” name =“” value =“”> </td> </tr> <tr> <td> <input type =“ email” name =“” value =“”> </td> </tr> <tr> <td> <input type =“ password” name =“” value =“”> </td> </tr> <tr> <td> <textarea name =“消息”行=“ 1” cols =“ 30”>

标签和输入对齐时当标签和输入未对齐时

Answer 1

表中不需要多余的表，并且您将所有内容都包含在1行之内，这就是其格式如此的原因。

您不应该为此使用表格，而不是在拥有CSS Flexbox和CSS Grid之类的表格时使用。这是basic example，将flexbox与表单结合使用。

但是如果必须使用表格，请尝试使用这种表格格式...

<table>
    <tr>
        <td>label here</td>
        <td>form field here</td>
    </tr>
    <tr>
        <td>label here</td>
        <td>form field here</td>
    </tr>
    ...
</table>

这是使用您的代码的示例。

    <form class="" action="index.html" method="post">
        <table>
            <tr>
                <td>
                    <label>Name</label>
                </td>
                <td>
                    <input type="text" name="" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Email</label>
                </td>
                <td>
                    <input type="email" name="" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Password</label>
                </td>
                <td>
                    <input type="password" name="" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Message</label>
                </td>
                <td>
                    <textarea name="Message" rows="1" cols="30"></textarea>
                </td>
            </tr>
        </table>
    </form>

HTMLForm-<textarea>打破了表格布局的对齐方式

1 个答案: