主页 / coding / 问题 / 77219066
Accepted
Edson Ordaz
Asked: 2023-10-03 08:21:38 +0800 CST

如何在顺风中放置不完整的垂直分隔线

  • 772

我正在尝试放置一个 x 分隔线，但线条未达到 100%，我向您展示我想要的示例：

我如何需要它的图片

<div className="grid md:grid-cols-4 rounded-[48px] md:h-48 grid-cols-1 rounded-[48px] bg-quater mx-auto w-5/6 text-white
            md:divide-x divide-primary divide-inset">

            <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text1 } </div>
            <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text2 } </div>
            <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text3 } </div>
            <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text4 } </div>
</div>

但有了这段代码，结果就是这样，分隔线从下到上

结果如何的图像

tailwind-css

1 个回答

  1. Best Answer

    您可以考虑向容器添加一些垂直填充：

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-green-400 mx-auto grid w-5/6 grid-cols-1 rounded-[48px] text-white md:h-48 md:grid-cols-4 md:divide-x md:py-5">
  <div class="font-gmr flex h-full w-full flex-col justify-center p-5 text-center text-2xl">{ language.secc2text1 }</div>
  <div class="font-raleway flex h-full w-full flex-col justify-center p-5 text-center">{ language.secc2text2 }</div>
  <div class="font-gmr flex h-full w-full flex-col justify-center p-5 text-center text-2xl">{ language.secc2text3 }</div>
  <div class="font-raleway flex h-full w-full flex-col justify-center p-5 text-center">{ language.secc2text4 }</div>
</div>

    • 0

相关问题