如何使用带有样式的 <legend> 元素？答案

【问题标题】：How do I use the <legend> element with styles?如何使用带有样式的 <legend> 元素？
【发布时间】：2015-07-08 00:09:00
【问题描述】：

我刚刚遇到了一个奇怪的问题，但无法找到答案或弄清楚。

问题在于<form> 中的<legend> 标记。

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

当我使用<form> 而不使用<fieldset> 但继续使用<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>

【问题讨论】：

A legend 需要 fieldset AFAIK - developer.mozilla.org/en-US/docs/Web/HTML/Element/legend
@Paulie_D 好吧，也许是有效的。但不要出现：jsfiddle.net/mhxohq11
有关网络浏览器工作人员的更多信息，请参阅相关问题中的this answer。

标签： html css legend

【解决方案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> 元素的顶部。

【讨论】：

我添加了一个代码示例来帮助说明您的帖子所说的内容。如果您愿意，请随意删除/返工。
@TylerH 这正是我想补充的，感谢您的贡献！