輸入中每個字母的寬度相同

Question

我有一個樣式輸入，使其看起來像有5個輸入。它只接受字母（即[az]）

我想要做的就是給在輸入5個字母相同的寬度，使每一個字母是其預防的事情爲中心這樣

這是此輸入CSS現在

input { 
    min-height: 0; 
    min-width: 0; 
    font-size: 2em; 
    line-height: 1.4; 
    letter-spacing: 1.18em; 
    text-align: left; 
    padding: 0 0 0 0.55em; 
    display: block; 
    position: relative; 
    width: 6em; 
} 

input::after { 
    content: attr(data-content); 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    padding-left: .55em; 
} 

Answer 1

如由@HeikoRupp評論建議的，使用固定寬度的字體。但是不要使用Courier，因爲它是最糟糕的選擇，而在較老的系統中，它甚至可能是一個位圖字體（只有幾種字體才能容忍）。實際上，在現代Windows系統中，Courier這個名字是指Courier New（除非系統真的安裝了Courier），這有點更好，但有問題。

部分基於一個font survey，我建議如下：

input { font-family: Consolas, Monaco, Lucida Console, monospace } 

的通用名稱monospace意味着該系統的默認等寬字體將被使用。在Android上，這意味着Droid Mono，默認情況下唯一可用的等寬字體。

Answer 2

也許嘗試這個插件：https://github.com/davatron5000/Lettering.js

例如：http://jsfiddle.net/krMhR/