时间戳

首页 > 解决方案 > 如何在框中包含标题作为是在一个

使用 Tailwind CSS

tailwind-css - 如何在框中包含标题作为是在一个
使用 Tailwind CSS

问题描述

无论是否使用Tailwind CSS，HTML <fieldset>都可以在框线内使用<legend>框入。当需要相同的外观但它不是<form>的一部分时，除了使用 Tailwind CSS 删除 <form> 之外，如何在不使用 <fieldset> 的情况下做到这一点。

例如，在本例中，使用 <div> 和 <h2>。

<!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

解决方案

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

<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.tai​​lwindcss.com/OG3rmf1K8e

编辑：

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

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

这是它的一个播放示例：https ://play.tai​​lwindcss.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.tai​​lwindcss.com/2Rwa9bQKeU

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

像这样：https ://play.tai​​lwindcss.com/JJtPV0gca2

推荐阅读