html - 在选项标签中对齐字符串的某些部分

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>

在 UI 中，下拉显示是这样 ↓ ，但我必须这样显示 ↓

               

我正在考虑做类似的事情

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

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

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