问题描述
我无法相信我无法找到有关此问题的任何信息.
I can't believe I haven't been able to find anything about this problem.
在我的新项目中，未来的用户将有一列带有一些input type="number"的列，并且作为数字字段(没有一个text一个)，我希望数字右对齐.
In my new project the future user will have a column with some input type="number", and as numeric fields (there is not a single textone) I want the numbers aligned to the right.
我发现数字太接近箭头了，所以从逻辑上讲，我在数字上加上了padding-right.
I found the numbers too close to the arrows so, logically, I added to them a padding-right.
令我惊讶的是，似乎我无法从箭头中分离出一些数字. padding-right沿数字移动箭头.
To my surprise, It seems I can't separate a little the numbers from the arrows. padding-right moves the arrows along the numbers.
基本上只有Opera可以正确地执行padding.但到目前为止，我没有测试过其他主要的3种浏览器.如您在下图中看到的那样.
Basically only Opera do the padding the right way. but not the other main 3 browsers I have tested so far as you can see in the image below.
所以.
一个 JSFIDDLE 并带有一个简单示例
a JSFIDDLE with a simple example
推荐答案
而不是使用padding-right，请使用以下CSS
Rather than using padding-right use the following CSS
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { margin-left: 20px; }
，对于Firefox，上述解决方案将无法正常工作，因此最好的解决方案是将其隐藏起来:
and for Firefox above solution won't work, so the best solution is just to hide it :
input[type=number] {
-moz-appearance:textfield;
}
或者您可以尝试使用一些jquery插件玩".
or you can try to "play" with some jquery plugin.
这篇关于如何将padding-right添加到输入type ="number"对齐时正确吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！