如何将 <legend> 元素与样式一起使用？

Question

我刚刚运行遇到了一个古怪的问题，一直无法找到答案或弄明白。

问题与 <form> 中的 <legend> 标签有关。

我使用 <form> 创建了一个表单，当我使用 <fieldset> 并在其中嵌套了 <legend> 时，页面呈现正常，很好！

当我在没有 <fieldset> 的情况下使用 <form> 但继续使用 <legend> 时，分页符。

具体来说，<legend> 文本不符合我在 <style> 下应用到 <body> 的样式。它不是居中文本，而是在左侧。（见代码..）

这对我来说可能真的很愚蠢，但是，是的，我很难过。我唯一能想到的是 <legend> 不能单独使用（没有像 <fieldset> 这样的元素）。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Misha's Homepage</title>
        <style>
            body {
                background-color:black;
                text-align:center;
                color:white
            }
        </style>
    </head>
    <body>
        <h1>Welcome!</h1>
        <hr>
        <p title="Carpe Diem">If you are reading this, well, we've only just begun.</p>
        <h2>Stay Hungry...</h2>
        <h3>Stay Foolish!</h3>
 <a href="https://youtu.be/2fAP-5NVZAA">Velocidas Eradico</a>
        <h1>Squad Up!</h1>
        <img src="ak_cartoon_whiteONclear2.jpg" alt="Get Sum." style="width:302px;height:217px">
        <form>
            <legend>Gimme Yo Digitz!</legend>
            <br>First Name:
            <br>
            <input type="text" name="firstname">
            <br>Last Name:
            <br>
            <input type="text" name="lastname">
            <br>
            <br>Choose:
            <br>
            <input type="radio" name="state" value="bored">Bored
            <br>
            <input type="radio" name="state" value="sleepy">Sleepy
            <br>
            <input type="radio" name="state" value="horny">Horny
            <br>
            <br>
            <input type="submit" value="Hit it!">
        </form>
    </body>

</html>

Answer 1

legend 必须放在fieldset内。就像 table 及其相关元素，没有 tr.

就不可能有 td 或 th

关于 legend 元素有一个有趣的事实，很多人都不知道，如果您将 legend 放在 fieldset 中的任何位置，它总是显示在顶部的 fieldset。就像 table 中的 tfoot 一样，它总是在 tbody 之后呈现，即使你将它放在 HTML.

的顶部

示例：

<fieldset>
    <span>Content</span>
    <legend>Title</legend>
</fieldset>

即使上面的 <legend> 元素写在之后 <span> 元素，它仍然呈现在 <fieldset> 元素的顶部.

如何将 <legend> 元素与样式一起使用？

How do I use the <legend> element with styles?

html

css

legend