CSS align parte di selezionare il testo a destra

Question

Questo è quello che sembra il mio HTML come:

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

Vorrei visualizzare selezionare le opzioni come questo:

Longname    P1 
Petr     P2 
Hugo     K4 

codici (P1, P2, P4) allineati al lato destro di select, condizioni - Non conosco la lunghezza del nome più lungo e preferirei non impostare la larghezza esatta in nessuna parte del testo

Answer 1

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

Answer 2

Gli elementi di opzione non possono avere elementi figlio .. quindi quello che stai facendo non funzionerà. Raccomando di usare https://select2.github.io/ per sostituire la casella di selezione se vuoi più funzionalità.

Answer 3

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

CSS styled <ul> con una funzione che invia il suo valore selezionato in un punto di vista tecnico è possibile utilizzare un'entità html display: none;<select>

Answer 4

-   - spazio unificatore ^{msdn, wiki}. Questo è molto, molto sbagliato - prima ogni elemento opzione deve avere lo stesso numero di caratteri e funziona anche correttamente solo se il carattere è monospazio ^wiki.

Quindi, sì, è necessario utilizzare una casella di selezione personalizzata. Ci sono molte, basta una piccola ricerca.

Questo, jsfiddle.net/ha4p1440, funziona in chrome, ma in altri browser è disallineato.

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

Qui, jsfiddle.net/ha4p1440/1, il tipo di carattere è impostato su 'Courier' e dovrebbe avere lo stesso aspetto in tutti i browser (ho provato in IE9).

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