如何将html图例标记显示在边框中间？

Question

我很好奇网页浏览器如何通过在边框之间插入内容来显示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

  一起放置

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