Wie kann ich mit einfachem CSS Text mit einheitlichem Punktabstand rechts ausrichten?

Ausrichten von Text mit Punkten in CSS

Frage: Wie kann ich mit einfachem CSS, wie gezeigt, Text mit einheitlichem Punktabstand rechts ausrichten? in diesem Beispiel?

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

Antwort: Um diese Rechtfertigung zu erreichen, wird üblicherweise eine Technik verwendet, die das Pseudoelement :after verwendet:

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>

Einschränkungen:

• IE-Versionen unter 8 werden nicht unterstützt.
• Inhalte dürfen keine HTML-Entitäten enthalten, wodurch die Verwendung von Sonderzeichen wie · eingeschränkt wird. UTF-8-Zeichen können jedoch die meisten Anforderungen erfüllen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit einfachem CSS Text mit einheitlichem Punktabstand rechts ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!