CSS aligns part of the selection text to the right

Question

This is what my HTML looks like:

<select> <option>Long name <span>P1</span></option> <option>Peter <span>P2</span></option> <option>Hugo <span>K4</span></option> </select> 

I would like to display choices, for example:

 Longname P1 Petr P2 Hugo K4 

codes (P1, P2, P4), aligned on the right side of the selection, conditions - I do not know the length of the longest name, and I would prefer not to set the exact width for any part of the text

Answer 1

Option elements cannot have children. So you are not going to work. I recommend using https://select2.imtqy.com/ to replace your selection box if you want more functionality.

Answer 2

http://jsfiddle.net/Tobsta/Lpb092gd/2/

CSS style <ul> with a function that sends its selected value to display: none; <select>

Answer 3

Technically, you can use the html object -   - inextricable space ^{msdn , wiki} . This is very, very wrong: first, each element of the element must have the same number of characters, and it also works correctly only if the font is a monospaced ^wiki .

So yes , you should use a special flag. There are many, a little search is required.

This, jsfiddle.net/ha4p1440 , works in chrome, but is shifted in other browsers.

 <select> <option>Long name P1</option> <option>Peter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;P2</option> <option>Hugo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;K4</option> </select> 

Here jsfiddle.net/ha4p1440/1 the font is set to "Courier" and it should look the same in every browser (I tried this in IE9).

 select { font-family: 'Courier',serif; } 

Answer 4

 <select> <option> <span style="float: left">Long name </span> <span style="float: right">P1</span> </option> </select>