余分な書式設定をせずに HTML で小数点を揃える方法

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

問題: テーブル内の数値を垂直方向に位置合わせするにはどうすればよいですか?追加の書式タグを導入したり、ブラウザ固有のコードを使用したりせずに小数点を表示できますか?

考えられる解決策:

• 数値の分割: 数値の分割HTML 要素を使用し、明示的な幅で小数点のスタイルを設定し、整数と小数に変換します。
• Char Column: を使用します。 HTML4 の構文。ただし、これは主要なブラウザではサポートされていません。

最適な解決策:

より効果的でブラウザ間互換性のあるアプローチは、Unicode 文字 FIGURE SPACE (U 2007,  ).

FIGURE SPACE:

FIGURE SPACE は固定幅の空白文字です。数字のものに。 No-Break Space と同様に、間隔が維持されます。図スペースで数値を埋めることにより、列または div を左側または右側に揃えることができます。

例:

左揃えおよび左詰めの数値Figure SPACES の使用:

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

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

このソリューションは次の点で優れています:

数値を小数点で正確に配置します。
• ブラウザーおよびフォント ファミリ全体で機能します。
• CSS と簡単に統合して、さらにスタイルを整えることができます。

以上が余分な書式設定をせずに HTML で小数点を揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。