将选择选项的部分文本在左侧对齐，部分在右侧对齐？答案

【问题标题】：Aligning part of a select option's text on the left and part on the right?将选择选项的部分文本在左侧对齐，部分在右侧对齐？
【发布时间】：2020-06-14 07:06:59
【问题描述】：

我有一个选择框，我需要让一些选项的文本向左对齐，其余的向右对齐，如下所示：

| option 1      0.5 |
| option 2      1.5 |

这可能吗？我考虑过将 div 放在选项中，但在搜索是否允许这样做时，我跑了几个地方说不允许。

感谢您的帮助。

【问题讨论】：

标签： html css selection

【解决方案1】：

option element 内容被视为纯文本（不识别标签），因此没有直接的方法。作为一种笨拙的解决方法，您可以使用等宽字体手动格式化选项并使用不间断空格：

    <style>
    select, option { font-family: Consolas,  monospace; }
    </style>
    <select>
    <option>option 1          0.5
    <option>option 2          1.5
    <option>one more option 110.5
    </select>

（其中option 元素内的空格是不间断空格；如果您不知道如何在创作环境中键入不间断空格，请使用&nbsp;）。

一种完全不同的解决方法或方法是将select 元素替换为一组复选框（或者，取决于所需的逻辑，单选按钮）和相关标签。然后，您可以在表格中表示这些数据并在其上设置合适的格式：

    <table>
    <tr><td><input type=checkbox> <td>option 1 <td align=right>0.5
    <tr><td><input type=checkbox> <td>option 2<td align=right>1.5
    <tr><td><input type=checkbox> <td>one more option <td align=right>110.5
    </table>

【讨论】：

【解决方案2】：

这是一个问题，因为您不能像您所说的那样将 div 放在选择标签内。选择标签内的唯一选项是，您可以在此处了解更多信息：optgroup

尽管在您尝试在选项标签内部进行编辑时，这对您没有多大帮助。我建议您尝试使用空格与选择框大小协作对其进行排序，以使其适合您的首选对齐方式

【讨论】：

【解决方案3】：

目前，我正在继续使用插入合适空格的解决方法。

select option {
     font-family: monospace;
 }

<select>
  <option>TEXT ONE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.02</option>
  <option>LONG TEXT&nbsp;&nbsp;&nbsp;&nbsp;1.00</option>
  <option>TEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100.00</option>
</select>

我通常用一些 JavaScript 代码来解决这个问题。

max_chars_col_1 = Math.max('TEXT ONE'.length, 'LONG TEXT'.length, ...);

option.innerHTML = 'TEXT ONE' + '&#160'.repeat( max_chars_col_1 - 'TEXT ONE'.length + max_chars_col_2 - '0.02'.length + 1 ;

【讨论】：