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>

Answer 2

这是一个问题，因为你不能像你所说的那样在一个选择标签中加入一个div。 select标记内的唯一选项是，您可以在此处详细阅读：optgroup

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

Answer 3

这对我来说在当前的Firefox 45.5.1 macOS中很有用。

select option:before {
      float: right;
      content: attr(data-groups);
      color: gray;
 }

<select>
  <option data-groups="TEXT A">1 TEXT</option>
  <option data-groups="TEXT B">2 TEXT</option>
  <option data-groups="TEXT C">3 TEXT</option>
</select>

对齐选项选项文本的左侧部分和右侧部分？

3 个答案: