代码之家 › 专栏 › 技术社区 › Jason Williams

CSS样式当文本添加到元素中时,将元素拉到页面下方[重复]

layout angular css html

1

Jason Williams · 技术社区 · 2 年前

我正在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;
}

我相信这真的很简单,但我就是不明白 为什么?

有人能阐明我做错了什么,为什么它会这么做吗?

非常感谢!

1 回复 | 直到 2 年前

1

0

Sharp Dev 2 年前

所以我要做的是对你的两个css类做两个简单的调整,你就会做好准备了。
首先,您应该更新值类以包括显示灵活性并证明内容中心的合理性。。。

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

这将解决你面临的迫在眉睫的问题,并防止盒子上下移动。。。作为一个额外的+1技巧,我还将更新.box类,使其具有一个flex direction:column(它而不是row),这样您就可以使用一个漂亮的显示了。(这样做会使您的数字居中显示在方框中)。

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