Geek asks and answers

Aligning part of the text of the selected option to the left and part to the right?

I have a selection box, and I need the text of some parameters to be aligned to the left, and the rest to the right:

| option 1      0.5 |
| option 2      1.5 |

Is it possible? I was thinking about putting a div in a parameter, but in a search to make sure this was allowed, I ran through several places that said it wasn’t.

Thank you for your help.

+5
source share
3 answers

The content of optionelement is accepted as plain text (tags are not recognized), so there is no direct way to do this. As a clumsy solution, you can manually format the parameters using a monospace font and use spaces without spaces:

    <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>
Run codeHide result

( 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>
Hide result
+4

, div , . select : optgroup

, . , , .

+1

This works for me on the current 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>
Run codeHide result
+1
source

More articles:


All Articles