在Option标签中对齐字符串的某些部分

Question

我想制作<option />标签的文字内容组。说我有以下内容：

<select>
  <option>CCB - AFHT Crew Balancing</option>
  <option>WFM - Force Majere</option>
  ....
  ....
  <option>WWW - Adjacent TRK Form B</option>
  <option>MAH - Air Hose Separation</option>
  ....
  ....
  <option>IIS - Chassis Shortage RR</option>
  <option>WFL - Flooding</option>               
</select>

在用户界面中，下拉列表显示如下↓，但我必须像这样显示↓

我在考虑做类似

的事情

<option><span style="width:30px;">CCB</span><span>- AFHT Crew Balancing</span></option>

但它不起作用，因为Options标签不允许任何其他子标签。

Answer 1

使用等宽字体，以便每个字符具有相同的宽度：

<select style="font-family:'Courier New'">
  <option>CCB - AFHT Crew Balancing</option>
  <option>WFM - Force Majere</option>
  <option>WWW - Adjacent TRK Form B</option>
  <option>MAH - Air Hose Separation</option>
  <option>IIS - Chassis Shortage RR</option>
  <option>WFL - Flooding</option>               
</select>

JSFiddle