Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie richtet man Dezimalpunkte in HTML ohne zusätzliche Formatierung aus?

Susan Sarandon
Freigeben: 2024-10-29 18:37:02
Original
321 Leute haben es durchsucht

How to Align Decimal Points in HTML Without Extra Formatting?

Dezimalpunkte in HTML ausrichten

Problem: Wie können numerische Werte in einer Tabelle vertikal in Bezug auf ausgerichtet werden? ihre Dezimalstellen, ohne zusätzliche Formatierungs-Tags einzuführen oder browserspezifischen Code zu verwenden?

Mögliche Lösungen:

  • Zahlen aufteilen: Zahlen dividieren in Ganzzahlen und Dezimalzahlen mithilfe von HTML-Elementen umwandeln und den Dezimalpunkt mit einer expliziten Breite formatieren.
  • Char-Spalte: Mit Syntax von HTML4. Dies wird jedoch von den gängigen Browsern nicht unterstützt.

Optimale Lösung:

Ein effektiverer und browserübergreifend kompatibler Ansatz ist die Verwendung des Unicode-Zeichens FIGURE SPACE (U 2007,  ).

FIGURE SPACE:

Der FIGURE SPACE ist ein Leerzeichen mit einer festen Breite zu dem der Ziffern. Der Abstand bleibt erhalten, ähnlich wie beim No-Break Space. Durch das Auffüllen von Zahlen mit FIGURE SPACES kann die Spalte oder das Div entweder auf der linken oder rechten Seite ausgerichtet werden.

Beispiele:

Linksbündige und links aufgefüllte Zahlen unter Verwendung von 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>
Nach dem Login kopieren

Diese Lösung ist überlegen, da sie:

  • Zahlen genau an ihren Dezimalstellen ausrichtet.
  • Funktioniert in allen Browsern und Schriftfamilien.
  • Ermöglicht eine einfache Integration mit CSS für weiteres Styling.

Das obige ist der detaillierte Inhalt vonWie richtet man Dezimalpunkte in HTML ohne zusätzliche Formatierung aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!