单纯右对齐金额列总显得“毛毛躁躁”，是因为text-align:right仅控制字符串整体位置，无法解决小数点错位、数字宽度不一（如1比0窄）、逗号分隔符与货币符号宽度不固定、默认字体非等宽等根本问题。
财务报表表格里金额不对齐，不是CSS没写对，而是只靠 text-align: right 无法解决小数点错位、数字宽度不一、单位干扰等真实问题。
为什么单纯右对齐金额列总显得“毛毛躁躁”
你加了 text-align: right，但“¥1,234.56”“−78.9”“10000”还是参差不齐——因为：
- 逗号分隔符（如
1,234.56）被当作文本字符，宽度不固定 - 负号
−和正号隐式存在，但前者占位更宽 - 货币符号（
¥、$）和单位（万元）混在数字里，text-align只管整个字符串左/中/右，不管内部对齐 - 默认字体（如
Segoe UI、Microsoft YaHei）对数字不是等宽设计，1和0实际像素宽度不同
真正让金额列“竖成一线”的三步实操
这不是单个CSS属性能搞定的事，得组合出手：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
font-variant-numeric: tabular-nums让纯数字部分（0–9）强制等宽 —— 但仅对连续数字生效，¥123.45中的¥和.不受影响 - 显式指定支持
tabular-nums的等宽字体，例如：font-family: "SF Mono", "Fira Code", monospace；中文字体慎用，Microsoft YaHei多数版本忽略该属性 - 配合
text-align: right+ 结构分离：把金额数字单独包一层<span class="amount-digit">123.45</span>，单位/符号放外面，再用 CSS 分别控制
响应式场景下金额对齐容易被忽略的细节
小屏时金额列常被压缩，此时：
-
table-layout: fixed必须设在<table> 上，否则列宽随内容撑开，右对齐失效 <li>移动端若用 <code>overflow-x: auto滚动表格，colgroup+<col>设置列宽比用width在<td> 上更稳定 <li>IE8 及更早版本不支持 <code><col>上的text-align，必须退回到给每个<td class="numeric"> 加类 <li>小数点对齐（如 Word 里的“小数点制表符”）HTML 无原生支持，只能靠 JavaScript 插件或服务端预处理补空格 —— 但会破坏语义和可访问性，不推荐</li> <h3>金额单元格里放图片或按钮时对齐失效怎么办</h3> <p><code>text-align对<img>、<button></button>这类块级或替换元素无效：- 如果单元格内只有文字+数字，
text-align: right足够 - 一旦混入
<img src="icon.svg">或<button>编辑</button>，需改用display: flex; justify-content: flex-end; align-items: center - 注意：加了
display: flex后，text-align完全失效，且vertical-align也不再起作用 - 若要兼容老浏览器，可用
margin-left: auto推动内联元素右移，但需确保父容器是块级且有明确宽度
金额对齐最麻烦的地方不在写法，而在“哪里该拆、哪里该压、哪里该换字体”——数字是否纯、单位是否外置、目标浏览器是否支持
tabular-nums，三者缺一不可。一个class="amount"看似简单，背后得同时盯住 HTML 结构、CSS 层叠、字体加载、浏览器兼容四条线。 - 如果单元格内只有文字+数字，
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
