명예 공백 패딩 내가이 예에서와 같이 공백으로 패딩 텍스트로 드롭 다운의 열 효과를 만들기 위해 노력하고 <select>

Question

고정 폭의 열을 표시합니다 :이 blog에 따르면

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

, 그것은 가능합니다.

문제는 공백이 줄어들어 열이 정렬되지 않는다는 것입니다. SAme는 FF, IE6 및 Chrome을 사용합니다.

무엇이 누락 되었습니까?

Answer 1

일반 공백 대신  을 사용해야합니다.

예를 들어, 당신은 당신의 옵션을 사용하여이 작업을 수행 할 것입니다 : HTML에서

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

Answer 2

공백은 기본적으로 계약을 체결한다. CSS를 사용하여 모노 스페이스 글꼴을 선택하고 (예를 들어 링크하는 예와 같이) 미리 서식이 지정된 공백을 스타일 지정합니다.

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

Answer 3

patmortech하여 답변을 확장은 물론   대신  의

//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); 
}