HTML 格式错误答案

【问题标题】：HTML wrong formattingHTML 格式错误
【发布时间】：2021-03-08 02:27:16
【问题描述】：

我正在尝试创建一个简单的登录页面，但我一直遇到问题。我在表格中输入的内容（又在表格中）进入页面的左上角。这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <table class="center">
            <tr>
                <td>
                    <p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        <input type="email" name="mail"><br>
                        <input type="password" name="password"><br>
                        <input type="reset"></td>
                    </form>
                    <input type="submit" name="submit">
                <td>
            </tr>
        </table>
        
    </body>
</html>

我还有几行 css “代码”

table.center {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

我不太明白为什么可怜的“提交”输入不会留在原地。

提前感谢您的帮助。

【问题讨论】：

嗨。留在原地是什么意思。您能否给出所有的 css 和一个工作示例，并更好地解释它的外观。
看起来应该是<input type="reset">之后的</td>应该是<br>，或者你也可以删除它。
我希望按钮位于输入下方，因为它们都居中，但由于某种原因，它一直跳到左上角。
@pierre 谢谢我忽略了它。很抱歉把你的时间浪费在这么小的事情上。不过我很感激

标签： html css forms formatting html-input

【解决方案1】：

您在表单周围的 td 嵌套是错误的。 /td 需要在提交之后，以便所有表单和提交都在单元格中。

这是修改后的代码：

<style>
table.center {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
</style>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <table class="center">
            <tr>
                <td>
                    <p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        <input type="email" name="mail"><br>
                        <input type="password" name="password"><br>
                        <input type="reset">
                    </form>
                    <input type="submit" name="submit">
                    </td>
                <td>
            </tr>
        </table>
        
    </body>
</html>

【讨论】：

非常感谢。我太着迷了，我只是看不到它。真的谢谢你
@EmanuelePolonia 答案有点正确，但并非完全正确。您正在关闭，但有一个没有内容或结束标记的打开。

【解决方案2】：

尝试将提交元素放在表单中？否则你可以只做一个按钮。我可能在这里错了，但值得一试。

<form>
    <input type="email" name="mail"><br>
    <input type="password" name="password"><br>
    <input type="reset"></td>
    <input type="submit" name="submit">
</form>

【讨论】：

当然可以，在表单中添加一个 id，<button type="submit" form="my-form">Submit</button>
感谢您的回复。事实证明，我对这种情况非常强调，以至于我忽略了一个不合适的简单。