如何使用CSS和HTML实现动态文本的精准对齐

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML = "";
  for (var key in preisstaffel) {
    // 每个价格项都包装在一个独立的div中
    document.getElementById(idelement).innerHTML += `<div class="">Bis ${key} Benutzer : ${(preisstaffel[key]).toFixed(2)}€ </div>`;
  }
}

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML = "";
  for (var key in preisstaffel) {
    document.getElementById(idelement).innerHTML += `
      <div class="price-container">
        <span class="text">Bis ${key} Benutzer:</span> 
        <span class="value">${(preisstaffel[key]).toFixed(2)}€ </span>
      </div>`;
  }
}

.price-container {
    /* 可选：用于容器的整体居中或其他布局 */
    margin: auto; 
    /* 确保容器本身是行内块级，或者使用其他布局方式 */
    display: block; /* 或者根据需要设置为inline-block */
    /* 调整行高以避免文本溢出 */
    line-height: 1.5; 
}

.price-container .text {
    width: 80px; /* 为左侧文本分配固定宽度 */
    display: inline-block; /* 使其成为行内块级元素，可以设置宽度 */
    text-align: right; /* 将文本右对齐到其分配的宽度内 */
    /* 垂直对齐，确保与value部分对齐 */
    vertical-align: top; 
}

.price-container .value {
    width: 40px; /* 为右侧价格分配固定宽度 */
    display: inline-block; /* 使其成为行内块级元素，可以设置宽度 */
    text-align: left; /* 将价格左对齐到其分配的宽度内 */
    /* 垂直对齐，确保与text部分对齐 */
    vertical-align: top;
}

<div class="popover__content">
  <p class="popover__message" style="font-size:12px;">Preisstaffelung-App</p>
  <div id='preisstaffelapp' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
    <!-- 动态内容将在此处生成 -->
  </div>
</div>

// 假设 pricingapp 已经定义
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };

document.addEventListener("DOMContentLoaded", function (event) {
  // ... 其他初始化代码 ...

  printPreisstaffel(pricingapp, "preisstaffelapp");
  updatePreisStaffelungBackend(); // 确保后端价格也使用新结构
});

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML = "";
  for (var key in preisstaffel) {
    document.getElementById(idelement).innerHTML += `
      <div class="price-container">
        <span class="text">Bis ${key} Benutzer:</span> 
        <span class="value">${(preisstaffel[key]).toFixed(2)}€ </span>
      </div>`;
  }
}

// ... 其他函数，例如 updatePreisStaffelungBackend 也需要类似修改 ...
function updatePreisStaffelungBackend() {
  var backendtype = document.querySelector("#backendfunktion").value;
  if (backendtype == "Z"){
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }else if (backendtype == "ZR") {
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }  
}

/* ... 现有CSS样式 ... */

/* 针对popover内容中的文本对齐 */
.popover__content {
  /* 确保popover内容可以容纳对齐后的文本 */
  width: 170px; /* 根据实际内容调整宽度 */
  /* 其他样式 */
}

.price-container {
    /* 确保容器是块级元素以便每项独占一行 */
    display: block; 
    /* 居中整个价格项（如果需要） */
    /* text-align: center; */ 
    /* 调整行高 */
    line-height: 1.5; 
    margin: 0 auto; /* 可以在popover内居中 */
    width: fit-content; /* 自动适应内容宽度，如果父容器设置了text-align: center */
}

.price-container .text {
    width: 80px; /* 左侧文本固定宽度 */
    display: inline-block;
    text-align: right; /* 右对齐 */
    vertical-align: top; /* 垂直顶部对齐 */
    padding-right: 5px; /* 可选：增加一些间距 */
}

.price-container .value {
    width: 40px; /* 右侧价格固定宽度 */
    display: inline-block;
    text-align: left; /* 左对齐 */
    vertical-align: top; /* 垂直顶部对齐 */
}

/* 调整原有popover样式，确保内容可以正确显示 */
.popover__message {
  text-align: center; /* 确保标题居中 */
}

#preisstaffelapp, #preisstaffelbackend {
  /* 移除原有text-align，由price-container控制 */
  text-align: unset !important; 
}