html - 边框中间的html图例标签是怎么显示的？

Question

我很好奇 Web 浏览器如何通过在边框之间插入内容来显示 legend 标记内容。如果我想自己重新创建这个，我想我将不得不弄乱绝对/相对定位，但我认为/希望有一种更简洁的方法..:P

我检查了源代码但很快就放弃了:P

下面是一些示例代码:

<fieldset>
  <legend>How did i get here?</legend>
  Name: <input type="text"><br>
  Email: <input type="email">
</fieldset>

Answer 1

我找到了一个很棒的教程 Add A Line Through Your Titles With CSS

所以我制作了this JSFiddle

• 无论文本大小如何，该行始终位于标题的中间。

• 确保为 .box 留出足够的空间，以避免文本离标题太近。

• 如果你想给 legend 相同的外观，你可以改变 .top_box 类并把 text-align: left; 和一些 padding-left

我希望这能回答您的问题。