在 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>

在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

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

Align some part of string in Option tag

html

css

select

options

dropdown