将文本添加到元素中时的 CSS 样式，将元素向页面下拉

Question

我正在 Angular 中构建一个自定义计算器，并努力准确理解这里发生的情况。我有 5 个 div 元素，高度和宽度设置为 10vw。启动时 div 中没有任何内容。我有一组反映 0-9 的按钮，然后将它们从后到前输入到这些 div 元素中（因此有效地键入一个值，在两个数字处强制小数点）。当我输入一个值并将其填充到 div 中时，问题就出现了。此时，它将 div 向页面下拉并继续，直到所有 5 个都有值，然后所有 5 个重新对齐到顶部。

我已经在 StackBlitz 上创建了该项目的工作演示。

我的 div 元素是：

 <div class="value">
    <div class="box">{{ digit5 }}</div>
    <div class="box">{{ digit4 }}</div>
    <div class="box">{{ digit3 }}</div>
    .
    <div class="box">{{ digit2 }}</div>
    <div class="box">{{ digit1 }}</div>
  </div>

这两个元素的直接 CSS 是：

.value {
  font-size: 9vw;  
  text-align: center
}
.box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: row;
}

我确信这真的很简单 - 但我只是不明白为什么

任何人都可以阐明我做错了什么以及为什么它会这样做吗？

非常感谢！

Answer 1

所以我要做的就是对你的两个 css 类进行两个简单的调整，然后你就准备好了。
首先，您应该更新值类以包含显示 Flex 并调整内容中心...

.value {
  font-size: 9vw;
  text-align: center;
  display: flex;
  justify-content:center;
}

这将解决您面临的直接问题，并防止盒子上下移动...作为额外的+1提示，我还将更新 .box 类以具有 flex-direction: column (它而不是行），您将拥有一个漂亮的显示屏。 （这样做会将您的号码放在框中的中心）。

.box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: column;
}