如何在文本输入字段中实现没有字母间距的最后一个字母?

时间:2012-03-26 17:09:00

标签: javascript html css

亲爱的社区成员,

我有一个小问题,涉及带字母间距的文本输入字段。例如,以下代码:

<input type="text" style="letter-spacing:1em; text-align:center;" maxlength="6" id="code" name="code" />

由于最后一个字母的最后一个字母间距,这会导致文本无法正确居中。有没有其他方法可以实现间距,还有文本居中功能?所有解决方案都很受欢迎(包括javascript和JQuery)。

(用户输入一个长度为6个字符的字符串,没有空格。)

感谢您的回复!

PS:我认为我没有忘记任何相关代码,因为em也可以替换为10px。我在这里有一个截图:http://www2.picturepush.com/photo/a/7889005/640/7889005.png

1 个答案:

答案 0 :(得分:8)

如何添加padding-left 1em

<input type="text" style="letter-spacing:1em; text-align:center; padding-left: 1em" maxlength="6" id="code" name="code" />

以下是一个示例,删除了maxlength并添加了宽度,因此您可以看到它已正确居中:

http://jsfiddle.net/Jgm42/

注意:这看起来只是某些浏览器的问题。令人震惊的是,IE似乎正确地省去了额外的间距,除非有相邻的字符。您可能必须执行一些特定于浏览器的代码。