0

数字を含む回覧divがあります (合計で 12 あり、インクリメントされます)。スタイリングはすべて完璧で、すべてうまく機能していますが、数字に複数の数字がある場合、数字がtext-align中央揃えにならないことに気付きました。

1 桁の div は次のようになります。

ここに画像の説明を入力

2 桁の div は次のようになります。

ここに画像の説明を入力

ご覧のとおり、2 番目の画像は数ピクセル右にあります。

paddingこれは、の代わりに使用することでほぼ確実に解決できることがわかりましたが、なぜこれが起こるのか、回避策があるのtext-alignか​​ 疑問に思っていましたか?

CSS

.number-circle {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);
    background-color: #76d17f;
    height: 19px;
    width: 24px;
    border: #fff 3px solid;
    cursor:pointer;
    color:#fff;
    text-align:center;
    padding-top:4px;
    font-weight:600;
    font-size:14px;
}

(PIE.htc を無視)

jsFiddle の例

4

1 に答える 1

2

使用しているフォントが等幅でないためです。のような等幅フォントを試してくださいfont-family:courier;。この更新された jsFiddle を見てください: http://jsfiddle.net/sKpkQ/2/

于 2013-04-10T14:48:55.537 に答える