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

【问题标题】：Align some part of string in Option tag在选项标签中对齐字符串的某些部分
【发布时间】：2016-01-12 18:10:06
【问题描述】：

我想将<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>

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

【问题讨论】：

实际上，看看您的示例，如果您的所有第一列的长度始终相同且具有相同的分隔符（即 3 个字母代码后跟一个空格、一个破折号和一个空格），那么您可以使用任何等宽字体，它应该可以工作。（这也看起来像图像的右半部分与左半部分在做什么）
我同意@arcyqwerty，要么使用等宽字体，要么尝试使用制表符？

标签： html css select options dropdown

【解决方案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

【讨论】：