Search code examples
htmlcssselection

Aligning part of a select option's text on the left and part on the right?

I have a select box and I need to have some of the options' text aligned to the left with the rest to the right, like this:

| option 1      0.5 |
| option 2      1.5 |

Is that possible? I thought about putting div's in the option, but in searching to see if that's allowed I ran across several places that said it wasn't.

Thanks for your help.

Solution

  • The option element content is taken as plain text (no tags are recognized), so there is no direct way to do it. As a clumsy workaround, you can hand-format the options using a monospace font and use no-break 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>

    (where the spaces inside the option elements are no-break spaces; use &nbsp; for them if you don’t know how to type no-break spaces in your authoring environment).

    A completely different workaround, or approach, is the replace the select element by a set of checkboxes (or, depending on desired logic, radio buttons) and associated labels. You can then represent this data in a table and set suitable formatting on it:

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