在选择选项中对齐两个单词

Question

我有以下选择：

<select name="mySelect">
   <option value="1">hello [test]</option>
   <option value="2">hello2 [test2]</option>
   <option value="3">hello33 [test33]</option>
   <option value="4">hel [hel]</option>
</select>

如何对齐选项内的文本以显示如下：

hello____[test]

hello2___[test2]

hello33__[test33]

hel_____ [hel]

我尝试使用 JavaScript 添加空格，但它们不可见。（ _ 是上面的空格字符）

Answer 1

这样做的唯一方法是首先将您的select元素设置为使用等宽字体（即字符都具有相同宽度的字体），然后用  字符实体填充您的元素：

select {
  font-family: monospace;
}

<select name="mySelect">
  <option value="1">hello&nbsp;&nbsp;&nbsp;[test]</option>
  <option value="2">hello2&nbsp;&nbsp;[test2]</option>
  <option value="3">hello33&nbsp;[test33]</option>
  <option value="4">hel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[hel]</option>
</select>

正如您所看到的，这确实使您的标记非常难看。它还迫使您使用可能未在整个站点范围内使用且可能不受欢迎的字体。我相信这是您可以准确实现这一目标的唯一方法，而无需用select某些 JavaScript 控制的元素结构完全替换您的元素。

根据您hello或[test]文本应该表示的内容，optgroup元素可能是您要查找的内容：

<select name="mySelect">
  <optgroup label="[test]">
      <option value="1">hello</option>
  </optgroup>
  <optgroup label="[test2]">
    <option value="2">hello2</option>
  </optgroup>
  <optgroup label="[test33]">
    <option value="3">hello33</option>
  </optgroup>
  <optgroup label="[hel]">
    <option value="4">hel</option>
  </optgroup>
</select>