はどのように追加するには「：」文字、私は以下のようにのようなフォームを作成したい多くの空白文字

Question

と私のラベルの近く：

abc   : 
abcdefg  : 

「ABC」の3文字を持っています。 'abc：'は20文字です。スペースは17文字にする必要があります。 'abcdefg'は7文字です。 'abcdefg：'は20文字です。したがって、スペースは13文字にする必要があります。私は& nbsp文字でスペースを追加したくありません。

<label class="col-sm-3 col-form-label col-form-label-lg">abc<span style="padding-left:17px;">:</span></label> 

<label class="col-sm-3 col-form-label col-form-label-lg">abcdefg<span style="padding-left:13px;">:</span></label> 

上記のコードは、 'px'が1文字のスペースと等しくないため、該当しません。

私は以下のようなコードを記述する必要はありません：

<label class="col-sm-3 col-form-label col-form-label-lg">abc &nbsp &nbsp &nbsp...:</label> 

がどのように私は、パディングのスタイルを持つ複数の文字スペースを追加することができますか？たとえば、js関数を記述して、$ nbspで複数のスペース文字を追加できますか？以下のように同様：

function AddMultiCharacterSpace(charCount){ ... } 

Answer 1

あなたがラベルにあなたが擬似要素を使用して試すことができます幅与えることができる場合：

label { 
 
    position: relative; 
 
    display: block; 
 
    width: 100px; 
 
} 
 
label::after { 
 
    content: ':'; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}

<label>abc</label> 
 

 
<label>abcdefg</label>

CODEPEN

Answer 2

label { 
 
\t width: 100px; 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
}

<label class="col-sm-3 col-form-label col-form-label-lg"> 
 
\t <span>abc</span> 
 
\t <span>:</span> 
 
</label> 
 
<label class="col-sm-3 col-form-label col-form-label-lg"> 
 
\t <span>abcdefg</span> 
 
\t <span>:</span> 
 
</label>

を

p.s.ラベルの幅を選択するだけです。

Answer 3

このようにすることができます。

label要素の場合は、display: inline-blockと設定します（たとえば、blockもオプションです）。

また、幅の値を指定する必要があります。

:文字を配置するには、:after疑似要素を使用し、右側に浮動させることができます。

label { 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
label:after { 
 
    content: ':'; 
 
    float: right; 
 
}

<label>abc</label><br> 
 
<label>abcdfgh</label>