如何使用 Tailwind CSS 将标题作为 <legend> 包含在 <fieldset> 中的框中答案

【问题标题】：How to include a title in a box as a <legend> is within a <fieldset> using Tailwind CSS如何使用 Tailwind CSS 将标题作为 <legend> 包含在 <fieldset> 中的框中
【发布时间】：2021-11-14 12:26:09
【问题描述】：

无论有没有Tailwind CSS，HTML <fieldset> 都可以在框线内用<legend> 框起来。当需要相同的外观但它不是 <form> 的一部分时，除了使用 Tailwind CSS 删除

之外，如何在不使用

的情况下完成此操作。

例如，在本例中，使用

。

<!DOCTYPE html>
<html lang='en-US'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link href='tailwind.css' rel='stylesheet'>
</head>
<body class='p-3'>
<fieldset class='p-3 border border-black'>
  <legend>A Legend Title</legend>
  Blah blah. Blah blah.
</fieldset>
<div class='p-3 border border-black'>
  <h2>A Heading</h2>
  Blah blah. Blah blah.
</div>
</body>
</html>

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您可能正在寻找这样的效果：

<div class='p-3 border border-black relative mt-12'>
    <h2 class="absolute -top-1/2 translate-y-1/2 bg-white">A Heading</h2>
    Blah blah. Blah blah.
</div>

将标题绝对定位到相对父级，并给它一个白色（或你的背景颜色）背景。但是，如果您的背景不是单一的纯色，这可能会导致问题。

这是一个播放示例https://play.tailwindcss.com/OG3rmf1K8e

编辑：

我想出了一个使用 flex 并且只使用 Tailwind 类的有点荒谬的解决方法。它摆脱了其他解决方案的问题，因为标题元素不再有背景。

它使用绝对定位的 flex 容器来模拟损坏的顶部边框，最终看起来与字段集图例非常相似。

这里有一个例子：https://play.tailwindcss.com/oBVHLKRDVl

<div class='p-3 pt-6 border border-t-0 border-black mt-12 relative'>
  <div class="flex absolute w-full -top-3 left-0 right-0 items-center">
    <span class="block border-t border-black flex-0 w-3" ></span>
    <h2>A Heading</h2>
    <span class="block border-t border-black flex-1" ></span>
  </div>
  Blah blah. Blah blah.
</div>

编辑 2：

用这个解决方案将标题居中也很简单，只需删除第一个跨度的固定宽度并给它flex-1。

像这样：https://play.tailwindcss.com/2Rwa9bQKeU

或者，如果您希望它翻转并靠近末端，只需将固定宽度切换到第二个跨度并给出第一个flex-1。

像这样：https://play.tailwindcss.com/JJtPV0gca2

【讨论】：