Html 文本右对齐<；选择>；以数字开头的文本

我想让我的

元素使我的文本向右对齐。这可以通过使用以下解决方案之一实现：

CSS：

选择{direction:rtl}

HTML属性：

这在大多数情况下都可以正常工作，但在某些边缘情况下会出现一个令人讨厌的小问题

当您执行以下操作时，会发生打嗝：

<select dir="rtl">
    <option value="1">1 Month</option>
    <option value="2">2 Months</option>
</select>

输出如下所示：

• 有些前缀为1个月
• 有些前缀为2个月

正文{
背景色：#000000；
}
.表格{
背景色：#ffffff；
宽度：400px；
}
.form__行{
边框：1px实心；
边距1rem auto 0 auto；
显示器：flex；
证明内容：之间的空间；
}
.form_u_row>div{
弹性基准：50%；
垫面：0.5雷姆；
垫底：0.5雷姆；
}
.表格\行.标签{
左：1rem；
}
.form_uu行。输入{
右侧填充：1rem；
文本对齐：右对齐；
}
.表格\行选择{
宽度：100%；
外观：无；
-webkit外观：无；
边界半径：0；
背景色：继承；
方向：rtl；
}
.表格\行输入{
文本对齐：右对齐；
宽度：100%；
}

你的名字：
多长时间：
1个月
2个月
前缀为1个月
前缀为2个月

如果您只想选择正确的文本，而不关心选项，则可以使用

文本最后对齐：右

：

选择{
文本最后对齐：右对齐；
}

1个月
2个月

那怎么办

 <select style="text-align:right">
    <option  value="1">1 Month</option>
    <option value="2">2 Months</option>
</select>

1个月
2个月

以下是使用您自己的代码的正确方法

这对你有用-

只需使用

方向：ltr

中使用code>，所有这些都可以正常工作：

.form__row select option {
    direction: ltr;
}

正文{
背景色：#000000；
}
.表格{
背景色：#ffffff；
宽度：400px；
}
.form__行{
边框：1px实心；
边距1rem auto 0 auto；
显示器：flex；
证明内容：之间的空间；
}
.form_u_row>div{
弹性基准：50%；
垫面：0.5雷姆；
垫底：0.5雷姆；
}
.表格\行.标签{
左：1rem；
}
.form_uu行。输入{
右侧填充：1rem；
文本对齐：右对齐；
}
.表格\行选择{
宽度：100%；
外观：无；
-webkit外观：无；
边界半径：0；
背景色：继承；
方向：rtl；
}
.表格\行选择选项{
方向：ltr；
}
.表格\行输入{
文本对齐：右对齐；
宽度：100%；
}

你的名字：
多长时间：
1个月
2个月
前缀为1个月
前缀为2个月

那一个没有影响：）在

或

元素上，有一个排版错误，这是@lumio回答的最佳选择。使下拉列表更加一致！谢谢@IanSegers很高兴我能提供帮助这是将

方向：

应用到

的正确方法，或者不同的浏览器将以不同的方式呈现选择框。@IanSegers Safari不支持这一点，请参阅链接：

.form__row select option {
    direction: ltr;
}