Tailwind 多步表单进度、绝对位置和弹性布局

Question

我正在尝试在顺风中构建这个组件。

事实证明，用我最好的尝试来复制是很困难的，这里，当屏幕尺寸下降时，你会发现中间的 4 个圆圈彼此等距，但第一个圆圈与它们和最后一个圆圈之间的间隙增加。我需要有人告诉我哪里出了问题，或者我可以改进我的努力。

Answer 1

<div class="container flex justify-center py-10">
  <div class="step1 relative w-full text-center before:absolute before:left-[50%] before:top-0 before:h-[10px] before:w-[200%] before:bg-brown after:absolute after:-top-1 after:left-[45%] after:h-[20px] after:w-[20px] after:rounded-full after:bg-mocha">
    <span class="mt-6 inline-block">step-1</span>
  </div>
  <div class="step1 relative w-full text-center before:absolute before:left-[50%] before:top-0 before:h-[10px] before:w-[200%] before:bg-brown after:absolute after:-top-1 after:left-[45%] after:h-[20px] after:w-[20px] after:rounded-full after:bg-mocha">
    <span class="mt-6 inline-block">step-2</span>
  </div>
  <div class="step1 relative w-full text-center before:absolute before:left-[50%] before:top-0 before:h-[10px] before:w-[200%] before:bg-mocha after:absolute after:-top-1 after:left-[45%] after:h-[20px] after:w-[20px] after:rounded-full after:bg-mocha">
    <span class="mt-6 inline-block">step-3</span>
  </div>
  <div class="step1 relative w-full text-center before:absolute before:left-[50%] before:top-0 before:h-[10px] before:w-[100%] before:bg-mocha after:absolute after:-top-1 after:left-[45%] after:h-[20px] after:w-[20px] after:rounded-full after:bg-mocha">
    <span class="mt-6 inline-block">step-4</span>
  </div>
  <div class="step1 relative w-full text-center">
    <span class="mt-6 inline-block">step-5</span>
  </div>
  <div class="w-full"></div>
</div>

为了取得进展，我们必须在每个步骤中在之前或之后创建线条，下面是相同的工作示例，我希望它能解决您的问题

https://play.tailwindcss.com/yavimsOggq