入力センタリング問題より上のスパンの整列

Question

対応する入力ボックスの上にスパンの行を中央に配置しようとしています。スパンと入力の幅はいずれも150pxに設定されていますが、スパンはFFIEの入力より2px小さくなります。これにより、すべてのラベルが意図した配置の左にずれるようになり、新しいラベルごとにシフトがより劇的になります。スパンの表示プロパティをinline-blockに変更したことに注意することが重要です。スパンの幅に+ 4pxを加えるよりも、これを改善する良い方法はありますか？

私はここに例があります。http://jsfiddle.net/kDcKB/5/

誰でも助けることができますか？

Answer 1

これはボックスモデルのためです。 border + widthは各要素で同じ方法を要約しません。

このお試しください：http://jsfiddle.net/easwee/kDcKB/8/

または.txtTest

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

用ボックスのサイズ変更プロパティを変更します