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

Susan Sarandon
リリース: 2024-10-29 18:37:02
オリジナル
358 人が閲覧しました

How to Align Decimal Points in HTML Without Extra Formatting?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート