在选择选项中对齐两个单词 [英] align two words in a select option

问题描述

我有以下选择:

<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>

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

How can I align the text inside the options to appear like this:

hello____[test]

hello2___[test2]

hello33__[test33]

hel_____ [hel]

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

I tried adding spaces with JavaScript but they are not visible. ( _ is space char above)

推荐答案

做到这一点的唯一方法是首先将 select 元素设置为使用等宽字体(即字符都具有相同的宽度)，然后用   角色实体:

The only way to do this would be to firstly set your select element to use a monospace font (that is a font whose characters all have the same width), then to pad out your element with the   character entity:

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 元素.

As you can see this does make your markup quite ugly. It also forces you to use a font which probably isn't used site-wide and may be undesirable. I believe this is the only way you can accurately achieve this though, without replacing your select element completely with some JavaScript-controlled element strucutre.

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

Depending on what your hello or [test] texts are supposed to represent, the optgroup element may be what you're looking for:

<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>

这篇关于在选择选项中对齐两个单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！