Honneur Whitespace rembourrage pour afficher les colonnes de largeur fixe <select>

Question

Je suis en train de créer l'effet de colonnes dans un menu déroulant par un texte de remplissage des espaces, comme dans cet exemple:

<select style="font-family: courier;"> 
<option value="1">[Aux1+1] [*] [Aux1+1]    [@Tn=PP] </option> 
<option value="2">[Main] [*] [Main Apples Oranges] [@Fu=$p] </option> 
<option value="3">[Main] [*] [Next NP]    [@Fu=n] </option> 
<option value="4">[Main] [Dr] [Main]    [@Ty=$p] </option> 
</select> 

Selon cette blog, il est possible.

Le problème est que les espaces sont contractés de sorte que les colonnes ne s'alignent pas. SAme résultats dans FF, IE6 et Chrome.

Qu'est-ce qui me manque?

Answer 1

Vous devez utiliser   au lieu des espaces normaux.

Par exemple, vous faire avec votre option:

<option value="2">[Main]&nbsp;&nbsp;&nbsp;[*]&nbsp;&nbsp;[Main Apples Oranges]&nbsp;[@Fu=$p] </option> 

Answer 2

espace blanc en HTML est contracté par défaut. Utilisez CSS pour sélectionner une police à espacement fixe (comme dans l'exemple que vous liez à) et stylisez l'espace blanc comme préformaté.

option { 
    font-family: monospace; 
    white-space: pre; 
} 

Answer 3

L'expansion de la réponse par patmortech pour rendre une ListItem en asp.net avec   au lieu de  

//Pad the columns 
string spaceDecode = Server.HtmlDecode(" "); 
for (int i = 0; i < ddl.Items.Count; i++) 
{ 
    ListItem item = ddl.Items[i]; 
    item.Text = item .Text.Replace(" ", spaceDecode); 
}