代码之家 › 专栏 › 技术社区 › Laramie

使用空格填充以固定宽度显示列<select>

fixed-width whitespace drop-down-menu select

4

Laramie · 技术社区 · 16 年前

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

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

根据这个 blog ,这是可能的。

我错过了什么?

3 回复 | 直到 16 年前

1

7

patmortech 16 年前

你需要使用   而不是普通的空间。

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

2

Laramie 16 年前

扩展patmortech的答案,在asp.net中用   &nbsp;

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

3

1

nikc.org 16 年前

默认情况下,HTML中的空白是收缩的。使用CSS选择一个单空格字体(就像你链接到的例子中那样),并将空白设置为预先格式化的样式。

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