按字符拆分并在css中对齐

Question

我在asp.net中有一个下拉列表

<asp:DropDownList ID="ddlMobile" runat="server">
    <asp:ListItem Value="1">Samsung - 1</asp:ListItem>
    <asp:ListItem Value="2">Ball - 2</asp:ListItem>
    <asp:ListItem Value="3">Motorolaaaa - 3</asp:ListItem>
    <asp:ListItem Value="4">Opppoooooooooooooo - 4</asp:ListItem>
    <asp:ListItem Value="5">iphone - 5</asp:ListItem>
    <asp:ListItem Value="6">nokiaaaa - 6</asp:ListItem>
</asp:DropDownList>

它的输出是

但是我的要求就像CSS中那样：

由于

Answer 1

我没有实现它，但它可以工作。

您可以在列表项之间添加空格。但是你需要计算它可能需要的空间。

您可以使用此字符 或 添加空格。

<asp:DropDownList ID="ddlMobile" runat="server">
    <asp:ListItem Value="1">Samsung &nbsp;&nbsp; - 1</asp:ListItem>

如果要绑定代码后面的数据，可以使用String.PadRight Method添加空格

我不确定但这个小提琴接近你的要求。

https://jsfiddle.net/KrShekhar/po1LpsaL/2/

问题是像素中每个字符的长度是不固定的。你可以做的是将文本放在一个范围内，然后计算跨度的大小并相应地改变小提琴。

Answer 2

<asp:DropDownList ID="ddlMobile" runat="server">
    <asp:ListItem Value="1">Samsung <span>- 1</span></asp:ListItem>
    <asp:ListItem Value="2">Ball <span>- 2</span></asp:ListItem>
    <asp:ListItem Value="3">Motorolaaaa <span>- 3</span></asp:ListItem>
    <asp:ListItem Value="4">Opppoooooooooooooo <span>- 4</span></asp:ListItem>
    <asp:ListItem Value="5">iphone <span>- 5</span></asp:ListItem>
    <asp:ListItem Value="6">nokiaaaa <span>- 6</span></asp:ListItem>
</asp:DropDownList>

<style>
#ddlMobile span{
float:left;
}
</style>