> 웹 프론트엔드 > CSS 튜토리얼 > 추가 서식 없이 HTML에서 소수점을 정렬하는 방법은 무엇입니까?

추가 서식 없이 HTML에서 소수점을 정렬하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-10-29 18:37:02
원래의
394명이 탐색했습니다.

How to Align Decimal Points in HTML Without Extra Formatting?

HTML에서 소수점 정렬

문제: 테이블의 숫자 값을 어떻게 수직으로 정렬할 수 있습니까? 추가 서식 태그를 도입하거나 브라우저별 코드를 사용하지 않고 소수점을 표시할 수 있나요?

가능한 해결 방법:

  • 숫자 나누기: 숫자 나누기 HTML 요소를 사용하고 명시적인 너비로 소수점 스타일을 지정하여 정수와 소수로 변환합니다.
  • 문자열: HTML4의 구문. 그러나 이는 주요 브라우저에서는 지원되지 않습니다.

최적의 솔루션:

더 효과적이고 브라우저 간 호환 가능한 접근 방식은 유니코드 문자 FIGURE SPACE (U 2007,  ).

FIGURE SPACE:

FIGURE SPACE는 고정 너비가 동일한 공백 문자입니다. 숫자까지. 중단 없음 공간과 유사하게 간격을 유지합니다. 숫자를 Figure Spaces로 채워서 열이나 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿