如何在下拉列表中对齐单词选项

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

为此，您需要使用等宽字体系列并在自己中添加额外的间距。由于两个空格字符将呈现为一个，因此需要使用不间断空格字符实体 （   ），而不仅仅是额外的空格：

.HTML

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

.CSS

select {
    font-family: monospace;
}

JSFiddle demo.