如何在HTML列表中为不同长度文本添加统一间距并整合页码

你需要将产品名称和对应页码放在同一个容器中，同时保证所有页码整齐靠右对齐，不受产品名称长度影响。以下是几个适配PHP循环输出的实用方案：

方案1：Flex布局（推荐） #

给每个独立的产品项容器设置弹性布局，让产品名称占满剩余空间，页码自动靠右对齐，代码简洁且兼容性好。

.product-list {
  /* 可选：给整个列表加个宽度限制 */
  max-width: 400px;
}
.product-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px; /* 增加行间距，提升可读性 */
}
/* 可选：如果产品名过长，添加溢出省略效果 */
.prodDetails {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabSpace {
  margin-left: 15px; /* 让页码和文本保持固定间距 */
}

对应HTML结构（PHP循环时，每次遍历输出一个.product-item即可）：

<div class="product-list">
  <div class="product-item">
    <span class="prodDetails">1 Cleaning</span>
    <span class="tabSpace">72</span>
  </div>
  <div class="product-item">
    <span class="prodDetails">2 Diary, Deli and Egg</span>
    <span class="tabSpace">49</span>
  </div>
  <div class="product-item">
    <span class="prodDetails">3 Health and Beauty</span>
    <span class="tabSpace">47</span>
  </div>
  <!-- 其他产品项按此格式循环输出 -->
</div>

方案2：绝对定位实现页码靠右 #

如果不想用Flex，也可以通过绝对定位让页码固定在容器右侧：

.product-list {
  max-width: 400px;
}
.product-item {
  position: relative;
  padding-right: 40px; /* 给页码预留足够空间 */
  margin-bottom: 8px;
}
.tabSpace {
  position: absolute;
  right: 0;
  top: 0;
}

HTML结构和方案1完全一致，无需额外修改。

方案3：Grid布局（单容器版） #

利用Grid的弹性列特性，让第一列自动占满空间，第二列自适应页码宽度：

.product-list {
  max-width: 400px;
}
.product-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px; /* 文本与页码的间距 */
  margin-bottom: 8px;
}

适配PHP开发的优势 #

以上所有方案的核心都是单个产品项包含名称和页码，PHP循环时只需遍历一次产品数据数组，每次循环输出一个完整的.product-item容器，同时填充名称和页码字段即可，无需维护两个独立循环，代码更简洁、易维护。

内容的提问来源于stack exchange，提问作者MR. UNBOX