如何用Tailwind实现h3与数字同行且p对齐h3起始位置？

问题描述 #

我正在开发一个项目，需要定位三个元素：

• 红色圆圈内的数字
• 与数字同行的<h3>标题
• 直接在<h3>标题下方起始的<p>元素

现有代码中数字与h3位置正确，但p元素起始位置偏左，尝试过添加内边距/外边距、包裹父容器、调整上层容器类等方法仍未解决，期望p文本精准对齐h3起始位置且保持布局完整。

现有代码：

<div class="rounded-l-full bg-brightredsuplight md:bg-transparent">
  <div class="flex flex-col space-y-4">
    <div class="flex items-center space-x-2">
      <div class="px-4 py-2 text-white bg-brightred rounded-full md:py-1">
        01
      </div>
      <h3 class="text-base text-verydarkblue font-bold md:mb-4 md:hidden">
        Track company wide progress
      </h3>
    </div>
    <p class="text-darkgrayishblue pl-12">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
      voluptatibus ea ab ullam esse animi vel eius sint laboriosam natus
      et ex accusamus, at ipsa voluptates! Voluptatem illum molestias eaque!
    </p>
  </div>
</div>

解决方案 #

方案1：用Grid布局实现精准对齐 #

核心思路是将数字、标题、段落放入同一个Grid容器，数字单独占一列，标题和段落共同占第二列，段落会自动与标题左对齐，无需固定内边距。

修改后的代码：

<div class="rounded-l-full bg-brightredsuplight md:bg-transparent">
  <!-- 定义网格列：第一列适配数字宽度，第二列占剩余空间 -->
  <div class="grid grid-cols-[auto_1fr] gap-y-4 gap-x-2 items-center">
    <div class="px-4 py-2 text-white bg-brightred rounded-full md:py-1">
      01
    </div>
    <h3 class="text-base text-verydarkblue font-bold md:mb-4 md:hidden">
      Track company wide progress
    </h3>
    <!-- 段落从第二列开始排列，自动对齐h3起始位置 -->
    <p class="text-darkgrayishblue col-start-2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
      voluptatibus ea ab ullam esse animi vel eius sint laboriosam natus
      et ex accusamus, at ipsa voluptates! Voluptatem illum molestias eaque!
    </p>
  </div>
</div>

方案说明：

• grid-cols-[auto_1fr]让第一列宽度由数字容器自动撑开，第二列占满剩余空间，完美匹配原布局中h3的起始位置。
• col-start-2指定段落从第二列开始排列，自然与h3左对齐，避免手动计算内边距的误差。
• 保留原间距类gap-y-4 gap-x-2，维持原布局的间距效果。

方案2：调整Flex结构包裹标题和段落 #

如果不想使用Grid，也可以将h3和p放入同一个容器，让数字与该容器作为Flex兄弟元素：

<div class="rounded-l-full bg-brightredsuplight md:bg-transparent">
  <div class="flex space-x-2">
    <div class="px-4 py-2 text-white bg-brightred rounded-full md:py-1">
      01
    </div>
    <!-- 标题和段落放入同一个垂直Flex容器 -->
    <div class="flex flex-col space-y-4 flex-1">
      <h3 class="text-base text-verydarkblue font-bold md:mb-4 md:hidden">
        Track company wide progress
      </h3>
      <p class="text-darkgrayishblue">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
        voluptatibus ea ab ullam esse animi vel eius sint laboriosam natus
        et ex accusamus, at ipsa voluptates! Voluptatem illum molestias eaque!
      </p>
    </div>
  </div>
</div>

方案说明：

• 外层Flex保证数字与标题+段落的横向排列，flex-1让右侧容器占满剩余空间。
• 标题和段落处于同一个垂直Flex容器内，段落自然与标题左对齐，无需额外调整内边距。

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