Question

我的数字列如下：

我需要它看起来像这样：

如何在HTML / CSS中做到这一点？甚至有可能吗？

Answer 1

我能想到的唯一方法（有点作弊）接近他评论中提到的@Mr Lister方法，但是没有实际的表（例如使用CSS属性设置表显示）。无论如何，您都需要在服务器端（或使用JS）上相应地修改/创建标记，并且当将数字分成几部分时，使用这两种方法当然都会创建语义/可访问性问题，所以我会实际上建议使用@Tim Lewis方法用 左/右填充数字，因为这样会使数字保持不变...但是为此，您需要某种脚本语言客户端或服务器端！

.wrapper {
  display: table;
  font-family: sans-serif;
  /*font-family: monospace; /* recommended */
  text-align: right;
}
.wrapper span {
  display: table-row;
}
[data-before]:before {
  content: attr(data-before);
  display: table-cell;
}
[data-after]:after {
  content: attr(data-after);
  display: table-cell;
  text-align: left;
}

<div class="wrapper">
  <span data-before="45" data-after=".56" aria-label="45.56"></span>
  <span data-before="132" data-after=".42" aria-label="132.42"></span>
  <span data-before="5" data-after="" aria-label="5"></span>
  <span data-before="3" data-after=".4" aria-label="3.4"></span>
  <span data-before="12001" data-after=".40140101" aria-label="12001.40140101"></span>
</div>

如何格式化列中的数字，以便它们与小数点（HTML）对齐

1 个答案: