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

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添加空格，但它们不可见。 （_是上面的空格char）

Answer 1

执行此操作的唯一方法是首先将select元素设置为使用等宽字体（即字符宽度相同的字体），然后使用{{填充元素1}} character entity：

 

select {
  font-family: monospace;
}

正如您所看到的，这确实使您的标记非常难看。它还会强制您使用可能不在站点范围内使用的字体，这可能是不合需要的。我相信这是你能够准确实现这一目标的唯一方法，而不是完全用一些JavaScript控制的元素结构替换你的<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或hello文本应代表的内容，[test]元素可能就是您要找的内容：

optgroup