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

Question

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

问题是女孩的“l”非常接近选择上的箭头下拉内容。我怎样才能在单词/内容（所有选项，我的意思是。我觉得不需要只针对单词“girL”）和小箭头之间放置更多“空格”？

我试过在“女孩”之后加一个空格，但这没有效果（即问题仍然存在）。

这是它的样子（有点）

sex:    |boy |v|
        |girl| 

这就是我想要的：

sex:    |boy  |v|
        |girl | 

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

PS html或css，我对解决方法无所谓！

Answer 1

嘿现在给padding right选择标签像这样

   select{
    padding-right:40px; // as your requirement give to padding-right 
    }

现场演示http://tinkerbin.com/vPS8tXNJ

Answer 2

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

1. 设置width不是针对每种情况的解决方案。灵活的宽度有时很有用。

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

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

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

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

Answer 3

只需使用

  

在它之后添加一个空格......如果你在css中确实需要它......

padding-right: 10px;