css - ドロップダウンリストオプションで単語を揃える方法

Question

ドロップダウン リスト オプションで 3 つの単語を揃える方法はありますか? 例えば。

<option value="1">ABCDE - ALPHA</option
<option value="2">1234 - NUMERIC</option>
<option value="3">ABC123 - ALPHANUMERIC</option>

上記の結果が欲しい

ABCDE  - ALPHA
1234   - NUMERIC
ABC123 - ALPHANUMERIC

それ以外の

ABCDE - ALPHA
1234 - NUMERIC
ABC123 - ALPHANUMERIC

これを行う方法はありますか？

可能な限りの助けを前もって感謝します

Answer 1

これを行うには、モノスペースフォント ファミリを使用し、余分な間隔を自分で追加する必要があります。2 つのスペース文字が 1 つとしてレンダリングされるため、 余分なスペースだけでなく、改行しないスペース文字エンティティ ( )を使用する必要があります。

HTML

<select>
    <option value="1">ABCDE - ALPHA</option>
    <option value="2">1234 &nbsp;- NUMERIC</option>
</select>

CSS

select {
    font-family: monospace;
}

JSFiddle デモ。