使用空白填充以固定宽度显示列

Question

我试图通过用空格填充文本来创建下拉列表中的列的效果，如下例所示：

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

根据此 博客，这是可能的。

问题是空白被收缩，导致列不对齐。在 FF、IE6 和 Chrome 中结果相同。

我缺少什么？

Answer 1

您需要使用   而不仅仅是普通空格。

例如，您可以使用以下选项来执行此操作：

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

Answer 2

扩展 patmortech 的答案，使用   而不是   在 asp.net 中呈现 ListItem

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

Answer 3

HTML 中的空白默认是收缩的。使用 CSS 选择等宽字体（如您链接到的示例中）并将空白样式设置为预格式化。

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