HTML表格中怎么让数字和单位对齐-html教程-PHP中文网

text-align: right 对数字和单位混排无效，因浏览器只对齐整行末尾而非数字边界；必须将数字与单位在html中分离为不同标签，并配合tabular-nums字体、统一数值格式化及固定单位占位才能实现精准右对齐。

html表格中怎么让数字和单位对齐

数字和单位混排时，text-align: right 为什么不管用

直接给 <td>24 kg</td> 加 text-align: right，看起来“24”右对齐了，但“kg”还是松散地挂在右边——因为单位本身宽度不等（“kg” vs “℃” vs “%”），浏览器只对齐整行末尾，不是对齐数字边界。更糟的是，如果单位里有中文或符号（如“元”、“件”、“↑”），它们根本不参与数字对齐逻辑。

必须结构分离：把数字和单位拆到不同标签里

这是唯一能稳定控制的方案。不能靠 CSS “猜”哪部分是数字，得在 HTML 层面明确切分：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<td> 24kg </td>
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: "SF Mono", monospace; }
.unit { display: inline-block; width: 2em; text-align: left; }（固定单位占位，避免浮动）
负号要用 Unicode 减号 −（U+2212），不是短横 -；否则 font-variant-numeric 不识别

小数点对齐还得加格式化和字体约束

光拆开还不够。比如 “1.23 kg” 和 “1234.56 kg”，小数点纵向错位，是因为默认字体里“1”比“0”窄，“.”宽度也不一致：

服务端或 JS 必须统一格式化：new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(1.2) → "1.20"
font-family 必须显式指定支持 tabular-nums 的字体，如 "SFMono-Regular", Consolas, monospace
别依赖系统默认 sans-serif 字体——Windows 上 Segoe UI 支持尚可，macOS 上 San Francisco 需 Safari 15.4+，旧版 Firefox 直接忽略 font-variant-numeric