如何为 DropDownList 中的 ListItem 设置对齐方式？答案

【问题标题】：How can I set alignment for a ListItem in a DropDownList?如何为 DropDownList 中的 ListItem 设置对齐方式？
【发布时间】：2011-10-19 18:48:35
【问题描述】：

我的 aspx 文件中有一个 DropDownList，如下所示：

<asp:DropDownList runat="server" ID="MaxRec">
  <asp:ListItem>10</asp:ListItem>
  <asp:ListItem>50</asp:ListItem>
  <asp:ListItem>100</asp:ListItem>
  <asp:ListItem>150</asp:ListItem>
  <asp:ListItem Selected="True">200</asp:ListItem>
</asp:DropDownList>

在 Chrome 中呈现如下：

如何将所有 ListItem 的对齐方式设置为向右对齐，以便正确对齐值？我尝试在 DropDownList 和 ListItems 上设置 style="text-align:right" 但它没有任何效果。我需要一个同样适用于 Chrome 的解决方案。

感谢回复！

【问题讨论】：

标签： asp.net webforms drop-down-menu alignment listitem

【解决方案1】：

下面的代码对我有用

<head>
    <style type="text/css">
          select.myDropDownList {
            text-align: right;
          }
        </style>
 </head>  


 <asp:DropDownList ID="myDropDownList" Runat="server" CssClass="myDropDownList">
   <asp:ListItem>10</asp:ListItem>
    <asp:ListItem>50</asp:ListItem>
    <asp:ListItem>100</asp:ListItem>
     <asp:ListItem>150</asp:ListItem>
 </asp:DropDownlist>

【讨论】：

@Shebin：这就是我在帖子中所说的，我试过了，但它在 Chrome 中不起作用。

【解决方案2】：

添加以下样式将根据需要对齐数字，但会将下拉箭头向左移动而不是向右移动。

除了使用它之外，我认为无法右对齐选择选项可能是 Chrome 中的一个限制。

.drop-down-list
{
    direction: rtl;
}

【讨论】：

+1 酷，它有效，但就像你说的那样，它把箭头放在另一边，我希望有更好的解决方案