2012-03-26 71 views
2

親愛的社區成員,如何在文本輸入字段中實現沒有字母間距的最後一個字母?

我有一個小問題,它涉及一個帶有字母間距的文本輸入字段。例如下面的代碼:

<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

+4

我想你忘了代碼 – keyser 2012-03-26 17:09:47

+0

不足夠的信息來了解這個問題。 – 2012-03-26 17:10:34

+0

它看起來很好地集中在Chromium/Ubuntu ... – 2012-03-26 17:16:14

回答

8

怎麼樣加入padding-left1em

<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瀏覽器似乎正確地忽略了額外的空格,除非有相鄰的字符。您可能必須執行一些瀏覽器特定的代碼。

+0

jeffb打敗了我,所以這裏是我創建反正的小提琴:http://jsfiddle.net/pratik136/VZm96/ – bPratik 2012-03-26 17:17:25

+0

哦,太棒了,它的工作原理!謝謝!然而,閃爍的線條並沒有站在最後一個字母的旁邊,而是仍然有間隔。我認爲我應該接受這個事實(或者有可能實現它)? – Snowflake 2012-03-26 17:24:19

+0

目前,唯一想到的其他解決方案是使用javascript/jQuery添加額外的空間,但該解決方案會帶來更多問題和煩惱。 – 2012-03-26 17:26:05

相關問題