div左右两侧的顺风水平线

Question

我正在尝试在测试 div/边框的右侧和左侧创建一条线，但无法弄清楚如何做到这一点。网上没有任何资源，我想有人可能知道怎么做。

绘制的黄线应该是线条。

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class="grid grid-cols-12 mb-20">
  <div class="col-span-5 text-right">
    <p></p>
  </div>

  <div class="col-span-2 mx-auto mt-10">
    <div class="sm:block w-0.5 bg-black absolute h-full left-1/2 transform -translate-x-1/2">
    </div>

  </div>

  <div class="col-span-5 pr-1">
    <div class="border rounded-full bg-black border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center mt-10"></div>

    <div class="border-2 border-black p-4 lg:p-4 lg:max-w-md">
      <p class="text-2xl text-center font-extrabold lg:text-6xl ">test</p>
    </div>
  </div>
</div>

Answer 1

这可以通过以下方式实现，现在我猜你可以管理的定位，即你想要离中心多少左右。

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<!-- Body -->
<div className="grid grid-cols-12 mb-20">
  <div className="col-span-5 text-right">
    <p></p>
  </div>

  <div className="col-span-1 mt-10">
    <div className="sm:block w-0.5 bg-black absolute h-full left-1/2 transform -translate-x-1/2"></div>
  </div>

  <div className="col-span-6">
    <div className="border rounded-full bg-black border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center mt-10"></div>
    <div className="grid grid-cols-3 items-center mt-6">
      <div>
        <hr />
      </div>
      <div className="text-center font-extrabold  border-2 border-black p-4">test</div>
      <div>
        <hr />
      </div>
    </div>
  </div>
</div>