Выберите выпадающее меню текст разделить влево и вправо?

Question

Не уверен, что это можно сделать, но можно ли разделить текст в тегах параметров?

Пример, нормальный стиль:

<select>
    <option value="">First - A</option>
    <option value="">Car - B</option>
    <option value="">Black - C</option>
    <option value="">Super Duper - D</option>
</select>

Как мне заставить его выглядеть так:

<select>
    <option value="">First       - A</option>
    <option value="">Car         - B</option>
    <option value="">Black       - C</option>
    <option value="">Super Duper - D</option>
</select>

Я пытался добавить тег span, вложенный в тег option, но это не сработало

Answer 1

Чем проще будет использовать непропорциональный (моноширинный) шрифт для этих блоков, а затем использовать правильное количество неразрывных пробелов, как это:

<style>
    select{
        font-family:monospace;
    }
</style>
<select>
    <option value="">First&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- A</option>
    <option value="">Car&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- B</option>
    <option value="">Black&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- C</option>
    <option value="">Super Duper&nbsp;- D</option>
</select>

Answer 2

<option> теги не принимают контент HTML.Вы можете заполнить ваш выбор только пробелами для их форматирования.

В качестве альтернативы есть плагины для <select>, которые используют DIV s и UL s вместо <select>, что дает вам большегибкость.