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

【问题标题】：align two words in a select option在选择选项中对齐两个单词
【发布时间】：2014-12-14 06:55:54
【问题描述】：

我有以下选择：

<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 添加空格，但它们不可见。 ( _ 是上面的空格字符)

【问题讨论】：

你可以使用&nbsp;。
字体也应该是等宽的。在你的 CSS 中设置它。
再次使用 &nbsp，它们没有正确对齐...尽管添加了空格。
所以hello&nbsp;&nbsp;&nbsp;&nbsp;[test] 不能正常工作？截图或小提琴会很好。
jsfiddle.net/jbk600a0

标签： javascript html css html-select

【解决方案1】：

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

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>

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

根据您的 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>

【讨论】：

我能以某种方式保留我当前使用的字体吗？是否有通过添加任何跨度并左右对齐的解决方案？
@sstauross 不是我知道的，除非您当前使用的字体是等宽字体本身。您不能在 option 元素中添加 HTML 标记。正如我在答案末尾所写的那样，我能想到的唯一其他选择是用 JavaScript 控制的结构替换 select 元素，它似乎做同样的事情——尽管这可能会让你陷入很多困境跨浏览器和移动设备兼容性问题。