Question

我试图右键对齐DropDownList的选项，但它似乎无法正常工作。

HTML：

<asp:DropDownList runat="server" CssClass="MyDDL">
    <asp:ListItem Text="1234"></asp:ListItem>
    <asp:ListItem Text="123"></asp:ListItem>
    <asp:ListItem Text="12345"></asp:ListItem>
</asp:DropDownList>

CSS：

.MyDDL
{
    width:100px;
    text-align:right;
}

正在应用CSS（DropDownList的宽度增加到100px），但里面的选项保持左对齐。

这里有什么问题？

更新

它在Firefox中完美运行！
这可能是Internet Explorer问题吗？我正在运行IE11。

Answer 1

这似乎不是一种很好的跨浏览器方式。最好的解决方案是使用dir属性或CSS direction属性从右向左对齐：

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="MyDDL" dir="rtl">

.MyDDL
{
    width:100px;
    direction:rtl;
}

但正如您所提到的，这会导致select箭头向左移动。否则，我知道的唯一替代方法是设置text-align:right已经完成，但似乎仅适用于Firefox （在IE8，Firefox 27和Chrome中测试过） 33）。

如何在DropDownList中右对齐选项？

更新

1 个答案: