CSS 计时器文本到达数字 1 时移动

Question

有人知道如何改变字符的宽度吗？我有一个timer，位置很好，但是到了1号，timer的宽度会变小。它应该始终处于同一位置。有没有人知道这个的解决方案？我使用 Digital-7 作为字体。

CSS:

#time {
                        font-family: digital-7;
                        font-size: 60px;
                        position: absolute;
                        margin: auto;
                        top: 65px;
                        left: 342px;
                        color: white;
                        text-align: right;
                        display: block;
                        width: 30px;
                        text-align: right;
                        letter-spacing:5px;
                    }

HTML:

<span id="time"></span>

Answer 1

你可以使用

display: block;

可能使用 div 更适合这个目的

Answer 2

问题是，你使用的字体不是等宽的（所有字母都使用相同的 "invisible box" 放在后面），所以你的解决方案是切换字体 - 这不需要额外的编码。

您的字体也以等宽字体提供，所以试试吧 > digital-7

CSS 计时器文本到达数字 1 时移动

CSS Timer text moves when it comes at number 1

css

timer

width