将可变宽度字体更改为固定宽度字体

Question

我有一个 asp.net 下拉列表控件，其中包含项目名称和价格列表，如下所示

Pen     |  2.09
Book    |   1.2
Handbag | 30.50
Pencil  |  1.05

填充完成后，下拉列表看起来完全对齐，但这仅适用于 font-family: "Courier New" , Courier, monospace;
现在整个页面都使用 Arial 字体，下拉菜单也需要相同的字体，我该如何实现呢？ 到目前为止，我已经尝试使用 jquery 将每个字符包装在 span 标签中，如下所示：

var array = $dropdownItem.text().split('');

var result = '<span>' +
              array.join('</span><span>') + 
             '</span>';

$dropdownItem.html(result);​

希望也许我可以将固定字体宽度应用于每个字符，但我不知道该怎么做。 感谢任何帮助。

Answer 1

最后，我发现除非是等宽字体，否则不可能使字体以相同的宽度显示。根据定义，等宽字体意味着每个字符的宽度相等。