html - 将选择选项文本的一部分左对齐，一部分右对齐？

Question

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

| option 1      0.5 |
| option 2      1.5 |

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

感谢您的帮助。

Answer 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 元素中的空格是不间断空格；如果您不知道如何在其中键入不间断空格，请为它们使用  您的创作环境)。

一个完全不同的解决方法或方法是用一组复选框(或者，根据所需的逻辑，单选按钮)和相关标签替换 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>