我想使用Tailwind CSS创建一个<hr>分隔符，但是我想在中间添加一些文本，而不是跨越整个页面宽度的水平线。例如：
<hr>
----------------------------------- Continue -----------------------------
我在文档中找不到类似的内容，如何才能达到这种效果呢？如果有必要，我可以将HTML更改为<hr>元素以外的其他元素，这是我所知道的创建水平线的唯一方法。
sy5wg1nm1#
您可以使用以下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
uklbhaso2#
试试这个
<script src="https://cdn.tailwindcss.com"></script> <div class="relative py-4"> <div class="absolute inset-0 flex items-center"> <div class="w-full border-b border-gray-300"></div> </div> <div class="relative flex justify-center"> <span class="bg-white px-4 text-sm text-gray-500">Continue</span> </div> </div>
示例
https://play.tailwindcss.com/Yx4OmAlBsv
rsaldnfx3#
是的，你可以这样做：
<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>
jyztefdp4#
试试这个。需要调整高度，边距，bg颜色等，以适应您的网站。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> <script src="https://cdn.tailwindcss.com"></script>
4条答案
按热度按时间sy5wg1nm1#
您可以使用以下HTML语法来创建所需内容：
看看这里的结果：https://play.tailwindcss.com/65JULZ5XES
uklbhaso2#
试试这个
示例
https://play.tailwindcss.com/Yx4OmAlBsv
rsaldnfx3#
是的，你可以这样做：
jyztefdp4#
试试这个。
需要调整高度，边距，bg颜色等，以适应您的网站。
https://play.tailwindcss.com/FzGZ1fMOEL