亲爱的社区成员,
我有一个小问题,涉及带字母间距的文本输入字段。例如,以下代码:
<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答案 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
并添加了宽度,因此您可以看到它已正确居中:
注意:这看起来只是某些浏览器的问题。令人震惊的是,IE似乎正确地省去了额外的间距,除非有相邻的字符。您可能必须执行一些特定于浏览器的代码。