HTML で小数点を揃える方法: 確実な解決策はありますか?

HTML での小数点の位置合わせ

HTML で小数点を位置合わせするという課題は長年の課題であり、広く受け入れられる解決策はありません。一般的な 2 つのアプローチには、数値を構成部分に分割することと、

内で "char" 属性を使用することが含まれます。要素。ただし、これらの方法はどちらも完全に満足のいく解決策を提供しません。

より洗練されたアプローチは、「FIGURE SPACE」として知られる Unicode 文字を使用することです (U 2007)。この空白文字は数字と同じ幅になるように設計されており、その間隔が維持されます。図のスペースをパディングとして使用すると、列または div の左側または右側に数値を配置できます。

例:

次のコード スニペットを考えてみましょう。

<code class="html"><p style="font-family: sans-serif">
  10000<br>
  &#8199;&#8199;123.4<br>
  &#8199;&#8199;&#8199;&#8199;3.141592
</p></code>

このコードは、小数点が縦に並んだ数値のリストを生成します。パディングとして使用される図のスペースにより、数字の長さに関係なく、数字が同じ水平スペースを占めるようになります。

注:

フォントのレンダリングにより、次のような可能性があることに注意することが重要です。 Figure スペースの外観に影響します。一部のフォントは図のスペースをまったくサポートしていない場合がありますが、他のフォントではわずかに異なる幅でレンダリングされる場合があります。配置が一貫していることを確認するために、目的のブラウザとフォントの組み合わせで図スペースの外観をテストすることをお勧めします。

以上がHTML で小数点を揃える方法: 確実な解決策はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。