如何在容器内实现左右并排布局（如编号与文字同行显示）

使用 css flexbox 将 `.b1` 和 `.new` 元素水平排列在同一行，通过 `display: flex` 控制父容器布局，替代绝对定位带来的对齐难题。

在网页开发中，让两个元素（如数字编号和文字标签）严格并排显示于同一行，是常见但易出错的布局需求。原代码中 .box-header 使用了绝对定位（position: absolute + left/top），导致 .b1 和 .new 依赖手动计算坐标，不仅难以维护，还极易因尺寸变化而错位。

✅ 正确解法：将 .box-header 设为 Flex 容器
只需在 .box-header 的 CSS 中添加 display: flex; align-items: center;，即可让其子元素（.b1 和 .new）自动沿主轴（横向）排列，并垂直居中对齐：

.box-header {
  display: flex;
  align-items: center; /* 垂直居中 */
  width: 782px;
  height: 64px;
  background: #ffffff;
  border-radius: 4px 4px 0px 0px;
}

同时，移除 .b1 和 .new 上冗余的 position: absolute、left/top 及固定宽高偏移（如 left: 249px、top: 354px 等），让它们由 Flex 自动流式布局：

.b1 {
  width: 40px;
  height: 64px;
  background: #25A575;
  border-radius: 4px 0px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b11 {
  font-size: 26px;
  color: #FFFFFF;
  font-weight
: 500;
  line-height: 1;
  margin: 0;
}

.new {
  margin-left: 12px; /* 与绿色块保持合理间距 */
  font-size: 20px;
  color: #3A719B;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap; /* 防止文字换行 */
}

? 关键注意事项：

• ❌ 避免混合使用 position: absolute 与 Flex —— 一旦父容器设为 display: flex，子元素的绝对定位会脱离 Flex 流，导致布局失效；
• ✅ 用 margin-left（而非 left）控制 .new 与 .b1 的间距，语义清晰且响应友好；
• ? 若需多组“编号+文字”并列（如 1/New、2/Pending、3/Approved），可直接在 .box-header 内追加同类结构，Flex 会自动顺序排列；
• ? 所有字体、颜色、圆角等样式可保留原有设计，Flex 不影响视觉表现，仅优化布局逻辑。

最终效果：绿色数字块（1）与“New Referral”文本严格左对齐、垂直居中、间距可控，且完全脱离硬编码像素偏移，具备良好的可扩展性与可维护性。