Tailwind多步骤表单进度条布局问题求助：绝对定位与弹性布局

你当前的进度条布局问题出在首尾步骤未与中间步骤及连接线纳入统一的空间分配体系。大概率是把首尾步骤单独放置，中间步骤用flex/grid做了均匀分布，但容器的剩余空白被挤压到首尾的外边距区域，导致屏幕缩小时首尾间距异常放大。

推荐两种Tailwind实现方式，都能保证所有步骤间距始终均匀：

方案1：Flex布局（更简洁） #

核心思路是将所有步骤和连接线放在同一个flex容器内，让连接线通过flex-grow自动均分剩余空间：

<div class="w-full max-w-4xl mx-auto px-4">
  <div class="flex items-center">
    <!-- 步骤1 -->
    <div class="flex flex-col items-center z-10">
      <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">1</div>
      <span class="text-xs mt-1">步骤1</span>
    </div>
    <!-- 连接线1 -->
    <div class="h-0.5 bg-blue-500 flex-grow"></div>
    <!-- 步骤2 -->
    <div class="flex flex-col items-center z-10">
      <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">2</div>
      <span class="text-xs mt-1">步骤2</span>
    </div>
    <!-- 连接线2 -->
    <div class="h-0.5 bg-gray-300 flex-grow"></div>
    <!-- 步骤3 -->
    <div class="flex flex-col items-center z-10">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">3</div>
      <span class="text-xs mt-1 text-gray-500">步骤3</span>
    </div>
    <!-- 连接线3 -->
    <div class="h-0.5 bg-gray-300 flex-grow"></div>
    <!-- 步骤4 -->
    <div class="flex flex-col items-center z-10">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">4</div>
      <span class="text-xs mt-1 text-gray-500">步骤4</span>
    </div>
    <!-- 连接线4 -->
    <div class="h-0.5 bg-gray-300 flex-grow"></div>
    <!-- 步骤5 -->
    <div class="flex flex-col items-center z-10">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">5</div>
      <span class="text-xs mt-1 text-gray-500">步骤5</span>
    </div>
    <!-- 连接线5 -->
    <div class="h-0.5 bg-gray-300 flex-grow"></div>
    <!-- 步骤6 -->
    <div class="flex flex-col items-center z-10">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">6</div>
      <span class="text-xs mt-1 text-gray-500">步骤6</span>
    </div>
  </div>
</div>

• 用flex-grow让所有连接线自动均分容器剩余空间，确保步骤间距一致
• z-10保证圆点在连接线上方，避免被线条遮挡
• 移除首尾步骤的额外margin/padding，让flex容器自动分配空间

方案2：Grid布局（更精准控制） #

通过自定义grid列，让每个步骤和连接线各占对应宽度，强制所有间距均匀：

<div class="w-full max-w-4xl mx-auto px-4">
  <div class="grid grid-cols-[repeat(6,auto)_repeat(5,1fr)] items-center gap-0">
    <!-- 步骤1 -->
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">1</div>
      <span class="text-xs mt-1">步骤1</span>
    </div>
    <!-- 连接线1 -->
    <div class="h-0.5 bg-blue-500"></div>
    <!-- 步骤2 -->
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">2</div>
      <span class="text-xs mt-1">步骤2</span>
    </div>
    <!-- 连接线2 -->
    <div class="h-0.5 bg-gray-300"></div>
    <!-- 步骤3 -->
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">3</div>
      <span class="text-xs mt-1 text-gray-500">步骤3</span>
    </div>
    <!-- 连接线3 -->
    <div class="h-0.5 bg-gray-300"></div>
    <!-- 步骤4 -->
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">4</div>
      <span class="text-xs mt-1 text-gray-500">步骤4</span>
    </div>
    <!-- 连接线4 -->
    <div class="h-0.5 bg-gray-300"></div>
    <!-- 步骤5 -->
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">5</div>
      <span class="text-xs mt-1 text-gray-500">步骤5</span>
    </div>
    <!-- 连接线5 -->
    <div class="h-0.5 bg-gray-300"></div>
    <!-- 步骤6 -->
    <div class="flex flex-col items-center">
      <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">6</div>
      <span class="text-xs mt-1 text-gray-500">步骤6</span>
    </div>
  </div>
</div>

• grid-cols-[repeat(6,auto)_repeat(5,1fr)]定义6个自适应宽度的步骤列，和5个均分剩余空间的连接线列
• 无需额外z-index，因为步骤列和连接线列交替排列，步骤内容自然在上方

内容的提问来源于stack exchange，提问作者Udders