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

To do this you'd need to use a monospace font-family and add the extra spacing in yourself. As two space characters will be rendered as one, you'll need to use non-breaking space character entities ( ) instead of just extra spaces:

HTML

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

CSS

select {
    font-family: monospace;
}

JSFiddle demo.