5

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

| option 1      0.5 |
| option 2      1.5 |

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

谢谢你的帮助。

4

3 回答 3

4

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

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

于 2012-09-16T11:39:55.157 回答
1

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

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

于 2012-09-15T21:00:21.867 回答
1

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

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 ;
于 2016-12-07T20:27:29.303 回答