Html选择列表在单个选项中对齐多个列

Question

选择框数据

 1. USA - USD
 2. UNITED KINGDOM - GBP
 3. .... - ...
 4. COUNTRY - CURRENCY

我问我怎样才能在列之间提供对齐。

 1. USA            -   USD
 2. UNITED KINGDOM -   GBP
 3. ....           -   ...
 4. COUNTRY        -   CURRENCY

我尝试添加空格，但字符的宽度与我的默认字体不同，但不起作用。

＆＃13;

＆＃13;

window.onload = function(){
  var s = document.getElementsByTagName('SELECT')[0].options, 
      l = 0, 
      d = '';
  for(i = 0; i < s.length; i++){
    if(s[i].text.length > l) l = s[i].text.length; 
  }
  for(i = 0; i < s.length; i++){
    d = '';  
    line = s[i].text.split('-');
    l1 = (l - line[0].length);
    for(j = 0; j < l1; j++){
      d += '\u00a0'; 
    }
    s[i].text = line[0] + d + line[1];
  }  
};

＆＃13;

<select>
  <option value="7">United Kingdom - GBP</option>
  <option value="17">Switzerland - CHF</option>
  <option value="33">Cyprus - EUR</option>
  <option value="33">Germany - EUR</option>
  <option value="33">Estonia - EUR</option>
  <option value="33">Spain - EUR</option>
  <option value="33">Finland - EUR</option>
  <option value="33">France - EUR</option>
  <option value="33">Greece - EUR</option>
  <option value="33">Eire - EUR</option>
  <option value="33">Italy - EUR</option>
  <option value="33">Liechtenstein - EUR</option>
  <option value="33">Luxembourg - EUR</option>
  <option value="33">Monaco - EUR</option>
  <option value="33">Montenegro - EUR</option>
  <option value="33">Malta - EUR</option>
  <option value="33">Holland - EUR</option>
  <option value="33">Portugal - EUR</option>
  <option value="33">Slovenia - EUR</option>
  <option value="33">Slovakia - EUR</option>
  <option value="33">San Marino - EUR</option>
  <option value="33">Andorra - EUR</option>
  <option value="33">Belgium - EUR</option>
  <option value="40">Brazil - BRL</option>
  <option value="42">Japan - JPY</option>
</select>
 

＆＃13;

＆＃13;

＆＃13;