本文详解如何使用 bootstrap 5 的 flexbox 布局替代过时的 float/pull-right，实现卡片内姓名左对齐、得分右对齐且垂直居中的专业效果，彻底解决传统 css 对齐失效问题。
在构建企业级排行榜（如销售榜、绩效榜）时，Bootstrap 卡片（Card）是常用组件。但许多开发者会遇到文本对齐失效的问题——尤其是希望将人名左对齐、分数右对齐，并保持两者在同一行、垂直居中对齐。你当前使用的 float-right、pull-right（Bootstrap 4 已弃用）、text-align: right 或 margin-left: 200px 等方式不仅语义混乱，更易受内容长度影响，导致数值位置随姓名长短漂移，破坏视觉一致性。
根本原因在于：你为包裹姓名和数字的 <div style="display: inline-block;"> 强制设定了固定行为，而内部 p.float-right 在 inline-block 容器中无法真正“撑满”或参与弹性布局；同时，float 会脱离文档流，使后续元素（如进度条）布局不可预测。
✅ 正确解法：采用现代 Flexbox 布局，利用 Bootstrap 内置工具类或原生 CSS 实现语义化、响应式、稳定对齐：
<div class="card" style="width: 350px; margin-right: 100px;">
<ul class="list-unstyled card-body mb-0 pb-0">
<li class="media mb-3 d-flex align-items-center justify-content-between">
<div class="media-body">
<strong class="fs-5">Jordan</strong>
</div>
<div class="text-end fw-bold fs-5">12</div>
</li>
<li class="mt-2">
<div class="progress mb-1" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 50%; background-color: green;"
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
</ul>
</div>关键改进说明：
- d-flex align-items-center justify-content-between 应用于 <li>：让容器成为 Flex 主轴（默认水平），align-items-center 实现姓名与数字垂直居中对齐，justify-content-between 自动将左侧内容（姓名）与右侧内容（数字）推至两端，完全不受姓名长度影响；
- 移除所有 float、pull-right、inline-block 及硬编码 padding-left —— 这些是旧式布局的遗留陷阱；
- 使用 Bootstrap 5 推荐的语义类：text-end（替代 float-right）、fw-bold（替代 font-weight: 650）、fs-5（替代 font-size: 20px），提升可维护性与响应式兼容性；
- 将进度条单独作为 <li> 元素，避免嵌套混乱，确保垂直间距可控（通过 mt-2 微调）。
⚠️ 注意事项：
- 若需支持 IE11，请避免 justify-content: space-between 在 flex 容器内含 flex-wrap: wrap 的组合（本例无需换行，安全）；
- EJS 循环中，确保每组 <li> 都应用 d-flex align-items-center justify-content-between，而非仅外层容器；
- 如需多行文本（如带职位名称），可将 .media-body 改为 d-flex flex-column 并用 mb-0 控制内边距。
总结：放弃 float 和 inline-block 的“补丁式”对齐，拥抱 Flexbox 是解决此类布局问题的现代标准方案。它简洁、可靠、可扩展，且与 Bootstrap 5 深度契合——一行语义类，即可实现专业级排行榜对齐效果。
