JS/CSS实现货币格式化：ISO代码左对齐、数值按最长字符串右对齐

嘿，刚好碰到过类似的需求，我来给你捋捋怎么实现这个弹性表格里的货币对齐效果！

核心思路拆解 #

你要的是ISO代码左对齐，数值不是整列右对齐，而是跟着该列里最长的数值字符串来对齐——说白了就是让所有数值的右侧对齐在同一条线上，而不是整个单元格右对齐对吧？那核心就是先算出数值里最长的那个的宽度，然后给所有数值容器设置这个宽度，再让数值右对齐就行。同时表格的列要保持宽度一致，用flex的flex:1就能轻松搞定。

具体实现步骤 #

1. HTML结构搭建 #

先把表格用flex结构写出来，每个货币单元格里拆成代码和数值两个独立部分，方便分别控制对齐：

<div class="flex-table">
  <div class="table-row">
    <div class="table-cell">
      <div class="currency-item">
        <span class="currency-code">USD</span>
        <span class="currency-value">10,000.00</span>
      </div>
    </div>
    <div class="table-cell">
      <div class="currency-item">
        <span class="currency-code">EUR</span>
        <span class="currency-value">10.00</span>
      </div>
    </div>
    <div class="table-cell">
      <div class="currency-item">
        <span class="currency-code">GBP</span>
        <span class="currency-value">1,234.56</span>
      </div>
    </div>
  </div>
  <!-- 可以添加更多行 -->
</div>

2. CSS样式配置 #

搞定flex表格的基础布局，保证列宽一致，同时设置货币项的对齐规则：

.flex-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.table-cell {
  flex: 1; /* 关键：所有列宽度自动均分 */
  padding: 10px;
  border-right: 1px solid #eee;
}

.table-cell:last-child {
  border-right: none;
}

.currency-item {
  display: flex;
  align-items: center;
  gap: 6px; /* 代码和数值之间留个舒服的小间距 */
}

.currency-code {
  text-align: left;
  /* 如果ISO代码长度固定，也可以加个固定宽度让对齐更规整 */
}

.currency-value {
  text-align: right;
  /* 这里的宽度后面用JS动态设置 */
}

3. JavaScript计算最大宽度 #

这一步是实现需求的关键，要动态算出所有数值里最长的那个的宽度，然后统一设置给所有数值容器：

// 获取所有数值元素
const valueElements = document.querySelectorAll('.currency-value');
if (!valueElements.length) return;

// 创建一个隐藏的测试元素，用来精准计算文本宽度（必须和数值用相同字体样式）
const testEl = document.createElement('span');
const computedStyle = window.getComputedStyle(valueElements[0]);
testEl.style.cssText = `
  visibility: hidden;
  position: absolute;
  font: ${computedStyle.font};
  white-space: nowrap;
`;
document.body.appendChild(testEl);

let maxWidth = 0;
// 遍历所有数值，找出最大宽度
valueElements.forEach(el => {
  testEl.textContent = el.textContent;
  const currentWidth = testEl.offsetWidth;
  if (currentWidth > maxWidth) {
    maxWidth = currentWidth;
  }
});

// 给所有数值元素设置这个最大宽度
valueElements.forEach(el => {
  el.style.width = `${maxWidth}px`;
});

// 用完就删掉测试元素，避免冗余
document.body.removeChild(testEl);

效果说明 #

这样做之后，表格的每一列宽度都是完全一致的，每个单元格里的ISO代码靠左对齐，数值则会以该列最长数值的宽度为基准靠右对齐——比如"10.00"会和"10,000.00"的右侧精准对齐，而不是整个单元格右对齐，完美匹配你的需求！

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