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

Question

我想使用Tailwind CSS创建一个<hr>水平分割线，但不是像传统的水平线一样跨越整个页面，我还想在中间添加一些文本。 例如：

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

我在文档中找不到类似这样的东西。我如何实现这种效果呢？

如果需要，我可以将HTML更改为除<hr>元素以外的其他内容。那只是我知道如何创建水平线的唯一方式。

- Guilherme Beserra

Answer 1

你可以使用这个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

- Vincent Decaux

---

如果不起作用，只需将w-full添加到父div中！对我有用！ - Marc Garcia

Answer 2

可以尝试使用以下方法代替...

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

Example

https://play.tailwindcss.com/Yx4OmAlBsv

- Karl Hill

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>

- user12417761

---

它可以是虚线吗？ - Zia Yamin

我尝试过，但不确定该怎么做。 - user12417761

Answer 4

请尝试这个。

需要调整高度、边距、背景颜色等以适应您的网站。

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>

- yubeizjh