0

开发一个需要计数的应用程序，并Orbitron为其方形外观选择了字体。

问题在于，与 chrome 上的默认字体不同，此字体的数字宽度不固定，这意味着计数字符将根据显示的数字大小左右移动。

这是小提琴中说明的问题：https ://jsfiddle.net/qc863hc4/8/

到目前为止，我发现的唯一解决方案是将两个数字分成两个不同div的 s，以便独立计算它们的位置，但这似乎过于复杂。

有没有办法固定字符的宽度<p>？

HTML

<body>
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  <div class="countainer">
    <p class="count">00</p>
  </div>
  <button>
  count++
  </button>
</body>

CSS

.countainer{
  width : 100px;
  height : 50px;
  border: 2px solid black;
  font-size: 40px;
  text-align : center;
  letter-spacing : 15px;
  text-indent : 10px;
  font-family : "orbitron";
}

.countainer p {
  margin : 0;
}

JS

var count=0
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
    count++;
  p.innerHTML = ("0" +count).slice(-2);
})
4

1 回答 1

1

正如其他答案中所解释的那样，您不能使用纯 css 来执行此操作，您在元素中设置每个数字的想法一点也不差，您可以像这样使用它

var count=0
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
    count++;
   var value = ("0" +count).slice(-2);
   var arr = value.split('');
   value = arr.map(function(element) {
    return '<span>'+element+'</span>';
   }).join('');
   p.innerHTML = value;
})

https://jsfiddle.net/RACCH/t8xg6dys/

于 2018-04-19T15:36:45.643 回答