如何在dropdownlist选项中对齐单词

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

要执行此操作，您需要使用monospace font-family并在自己中添加额外的间距。由于两个空格字符将呈现为一个，您需要使用不间断的空格字符实体（ ）而不仅仅是额外的空格：

HTML

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

CSS

select {
    font-family: monospace;
}

JSFiddle demo