我真不敢相信我一直没能找到关于这个问题的任何东西。
在我的新项目中,未来的用户将有一个包含一些input type="number"
的列,而作为数字字段(没有一个text
字段),我希望数字向右对齐。
我发现数字太接近箭头,所以,逻辑上,我添加到他们的padding-right
。
令我惊讶的是,我似乎无法将数字与箭头分开一点。padding-right
沿着数字移动箭头。
基本上只有Opera
做padding
的正确方式。但不是其他主要的3个浏览器,我已经测试到目前为止,你可以看到在下面的图像。
那么,有没有办法把数字和箭头分开,至少在Firefox
和Chrome
中可以使用(就像我们推荐的这两种浏览器一样)?
一个JSFIDDLE的简单示例
6条答案
按热度按时间ej83mcc01#
使用以下CSS而不是
padding-right
对于Firefox,上述解决方案不起作用,所以最好的解决方案就是隐藏它:
或者您可以尝试“玩”一些jquery插件。
suzh9iv82#
这是相当烦人的,在我的情况下,我通过将旋转器传递到左侧来解决这种情况。
zpqajqem3#
blmhpbnm4#
也老了,如果这种情况再次发生,我主要把这个留给自己。我遇到过类似的问题,下面是我解决它的方法。它假设你有一个最大值:否则,请将最大值设置得足够高,以使用户永远无法达到该值。
在我的例子中,解决这个问题的关键是最大值...更具体地说,最大值中的字符/位数。使用上面的例子,我们有6位数。
这在我编写CSS规则时就开始起作用了。首先,我使用了上面的webkit-outer-spin-button/webkit-inner-spin-button/Firefox规则,并做了一个小改动...我使用ems作为边距:
然后我用上面的位数定义了宽度。
现在,由于这是一个数字字段,用户可以"type over the boundary"并键入一个数字,例如99999999。在这些情况下,我使用了jQuery keyup函数自动将数字降低到最大值。
我将把它放在下面的片段中,以便您可以看到它。
一个三个三个一个
ldioqlga5#
Webshim是一个polyfill库,它使您能够跨浏览器可靠地使用HTML5功能,即使缺少原生支持。
JSFiddle demo
62o28rlo6#
我知道这是旧的,但我找到了另一个"解决办法",在绊倒这个之后。
一种解决方案是使用文本缩进和Calc:
我发现这个解决方案通过检查可能的CSS属性输入:https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls
对不起,这只适用于固定的定义数字长度,因为它仍然是左对齐。
使用下面代码Pen中的方法(计算实际文本大小)可以实现具有该属性的大量JS解决方案:https://codepen.io/Momciloo/pen/bpyMbB