html - 我可以在 html 选择下拉列表中的内容和箭头之间放置一个空格吗？

Question

我有一个选择下拉菜单，其中包含“女孩”一词作为选项。

问题是女孩的“l”非常靠近选择上的箭头下拉项。我怎样才能在单词/内容(所有选项，我的意思是。我觉得不需要只是定位单词“girL”)和小箭头？

我试过在“girl”后面加一个空格，但这没有效果(即问题仍然存在)。

这是它的样子(有点)

sex:    |boy |v|
        |girl| 

这是我想要的:

sex:    |boy  |v|
        |girl | 

是的，我知道这里几乎每个人都知道我在说什么。用管道绘制下拉菜单很有趣!

PS html或css，我对解决方法无动于衷!

Answer 1

也许，这为时已晚，但是，我将其发布为下一位访问者的信息。

1. 设置宽度 并非适用于所有情况。灵活的宽度有时很有用。

2. Padding-right 也不是解决方案，因为它只在箭头和 右边框，但不在文本和箭头之间。

3. 对于静态列表项，在每一行的尾部添加 是最好的解决方案。但如果您动态执行此操作，Google Chrome 会将其显示为文本而不是特殊字符。

4. 对于动态变化，以下效果很好:

   option.text = itemtext + String.fromCharCode(160);