如何右对齐 DropDownList 中的选项？

Posted 2023-03-06

【中文标题】如何右对齐 DropDownList 中的选项？

【英文标题】：How to right-align options in a DropDownList?

【发布时间】：2014-04-17 12:44:59

【问题描述】：

我正在尝试右对齐 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。

【问题讨论】：

我认为这个链接会对你有所帮助。 ***.com/questions/6938374/…

浮动：对；有什么效果吗？

@Ganesh，第一个答案是一个丑陋的黑客（它也将箭头向左移动），而第二个答案与我使用的设置完全相同......

@voddy，它将控件移动到页面的左侧；它完全不影响其中的文本。

【参考方案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 中测试）。