使用 Tailwind CSS 创建包含文本的水平线 (HR) 分隔符

Question

我想使用 Tailwind CSS 创建一个 <hr> 分隔线，但我想在中间添加一些文本，而不是横跨整个页面宽度的水平线。 =15=]

例如：

----------------------------------- Continue -----------------------------

我在文档中找不到类似的内容。我怎样才能达到这个效果？

如有必要，我可以将 HTML 更改为 <hr> 元素以外的内容。那只是我知道如何创建水平线的唯一方法。

Answer 1

试试这个...

<div class="py-4">
    <div class="w-full border-t border-gray-300"></div>
</div>

例子

https://play.tailwindcss.com/5pqhRGN8dQ

Answer 2

您可以使用此 HTML 语法来创建您想要的内容：

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

在这里查看结果：https://play.tailwindcss.com/65JULZ5XES

Answer 3

是的，你可以这样做：

<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black 
           after:inline-block after:relative after:align-middle after:w-1/4 
           before:bg-black before:inline-block before:relative before:align-middle 
           before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>

Answer 4

试试这个。

需要调整高度、边距、bg-color 等以适合您的网站。

https://play.tailwindcss.com/FzGZ1fMOEL

<div class="h-5 border-b-4 border-black text-2xl text-center">
    <span class="bg-white px-5">your text</span>
</div>

使用 Tailwind CSS 创建包含文本的水平线 (HR) 分隔符

Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

html

css

tailwind-css