간단한 CSS를 사용하여 균일한 점 간격으로 텍스트를 오른쪽으로 정렬하는 방법은 무엇입니까?

CSS에서 점으로 텍스트 정렬

질문: 표시된 것처럼 간단한 CSS를 사용하여 균일한 점 간격으로 텍스트를 오른쪽에 정렬하려면 어떻게 해야 합니까? 이 예에서는?

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

답변: 이러한 정당화를 달성하기 위해 일반적으로 :after 의사 요소를 활용하는 기술이 사용됩니다.

CSS:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

<dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl>

제한사항:

• IE 버전 8 미만 지원되지 않습니다.
• 콘텐츠에는 HTML 엔터티가 포함될 수 없으므로 ·와 같은 특수 문자의 사용이 제한됩니다. 그러나 UTF-8 문자는 대부분의 요구 사항을 충족할 수 있습니다.

위 내용은 간단한 CSS를 사용하여 균일한 점 간격으로 텍스트를 오른쪽으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!