如何使用HTML实现价格计算器内文本互相对齐的效果

你现有代码存在两个明显问题，直接改是出不来对齐效果的：

• <thead>、<td> 是表格专属标签，必须嵌套在<table>、<tr>标签里才能生效，直接丢在div里没有任何布局作用
• 靠<br>硬换行只能把内容堆成竖排，根本做不到列与列之间的对齐，只要文本长度稍微变一点布局就会错位

推荐方案：Flex弹性布局（适配性最好，维护简单） #

用弹性布局的两端对齐规则，天然实现「左侧计费项名称、右侧单价」的对齐效果，不用写死列宽，后续加新的计费项也不用改样式：

<style>
.grid-item {
  width: 280px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eee;
}
/* 单行计费项的布局规则 */
.price-line {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}
.grid-item hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 16px 0;
}
/* 总价和上方价格列保持右对齐 */
.summe {
  display: block;
  text-align: right;
  font-size: 1.2em;
  font-weight: 700;
}
</style>

<div class="grid-item">
  <div class="price-line">
    <span>App-Benutzer</span>
    <span>pro 7,50€</span>
  </div>
  <div class="price-line">
    <span>Backend-Benutzer</span>
    <span>pro 35,50€</span>
  </div>
  <hr>
  <span class="summe">0.00</span>
</div>

实现后所有左侧项目名自动沿左边缘对齐，右侧价格自动沿右边缘对齐，总价和价格列保持同一对齐线，完全匹配价格计算器的常规视觉要求。

备选方案：原生表格实现 #

如果你更习惯用表格结构，只要修正标签嵌套逻辑，也能实现对齐效果：

<style>
.calc-table {
  width: 280px;
  border-collapse: collapse;
}
.calc-table td {
  padding: 8px 4px;
}
/* 第二列价格统一右对齐 */
.calc-table td:last-child {
  text-align: right;
}
.total-line td {
  border-top: 1px solid #ccc;
  padding-top: 16px;
  font-weight: 700;
  font-size: 1.2em;
}
</style>

<div class="grid-item">
  <table class="calc-table">
    <tr>
      <td>App-Benutzer</td>
      <td>pro 7,50€</td>
    </tr>
    <tr>
      <td>Backend-Benutzer</td>
      <td>pro 35,50€</td>
    </tr>
    <tr class="total-line">
      <td></td>
      <td class="summe">0.00</td>
    </tr>
  </table>
</div>

注意：表格方案需要给外层容器设置固定宽度，否则列宽会随文本长度自动伸缩，对齐效果容易乱。

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