Select Option下拉框展示双属性并保留原有字体实现对齐的问题咨询

原生<select>的<option>标签仅支持纯文本展示，不支持内嵌HTML结构，要在保留现有字体的前提下实现姓名和职位两列对齐，可选用以下两种方案：

方案1：固定宽度空白字符填充（兼容原生select） #

使用宽度固定的特殊空白字符补全短姓名的长度，不受当前普通字符宽度差异影响：

1. 先统计所有员工姓名的最大显示长度
2. 给长度不足的姓名后填充对应数量的\u3000（表意文字空格，宽度固定等于一个全角字符）
3. 给select添加white-space: pre属性避免空格被折叠

示例JS代码：

const staff = [
  {name: 'Bob Smith', position: 'Director'},
  {name: 'Mike Kawazki', position: 'HR'},
  {name: 'Jane Doe', position: 'Manager'}
]
// 计算最大姓名长度
const maxNameLen = Math.max(...staff.map(item => item.name.length))
// 生成option
const optionHtml = staff.map(item => {
  const fillSpace = '\u3000'.repeat(maxNameLen - item.name.length)
  return `<option value="${item.name}">${item.name}${fillSpace}${item.position}</option>`
}).join('')

对应CSS：

select {
  white-space: pre;
}

方案2：自定义模拟下拉组件（对齐精度更高） #

如果对样式灵活性要求更高，可以用div模拟下拉结构，用flex布局实现两列对齐，完全不影响原有字体设置：

示例DOM结构：

<div class="custom-select">
  <div class="select-trigger">请选择员工</div>
  <div class="dropdown-list">
    <div class="dropdown-item">
      <span class="staff-name">Bob Smith</span>
      <span class="staff-position">Director</span>
    </div>
    <div class="dropdown-item">
      <span class="staff-name">Mike Kawazki</span>
      <span class="staff-position">HR</span>
    </div>
    <div class="dropdown-item">
      <span class="staff-name">Jane Doe</span>
      <span class="staff-position">Manager</span>
    </div>
  </div>
</div>

核心CSS：

.dropdown-item {
  display: flex;
  padding: 6px 12px;
}
.staff-name {
  width: 120px; /* 可根据最长姓名调整固定宽度 */
  text-align: left;
}
.staff-position {
  flex: 1;
  text-align: left;
}

自定义组件可以额外添加点击选中、键盘操作等逻辑，实现和原生select一致的交互效果。

内容的提问来源于stack exchange，提问作者userone