我有一个带有显示屏的容器:flex,它的高度比它的内容高.

例如:

我有一个有两个跨度的v型柱

<v-col style="display:flex;flex-direction:column">
  <span style="background-color:green;font-size:0.4rem">134 POSTS</span>
  <span style="background-color:green;font-size:0.4rem">120 POSTS</span>
</v-col>

如果我将"弯曲方向"设置为"柱",则:

enter image description here

跨度的高度大于其内容!

如果我将"弯曲方向"设置为"行",则:

enter image description here

同样的情况也会发生.

我认为跨度高度只是他的内容高度

编辑:

我再试了一次,但问题只出现在我试图在一张卡片中插入display flex列时:下面是在vuetify中try 的代码

<v-card>
  <v-card-title>
    <v-row>
      <v-col class="d-flex" style="flex-direction: column">
        <span style="font-size: 0.6rem"> 123123 </span>
        <span style="font-size: 0.6rem"> 123121 </span>
      </v-col>
    </v-row>
  </v-card-title>
</v-card>

enter image description here

解决方案:

我找到了解决方案,v-card-title有一个带有行高的类,解决方案是编辑此行高

enter image description here

enter image description here

推荐答案

在Vuetify中,v-card-title类默认设置为line-height: 2rem,编辑这个类修复了这个问题!

Css相关问答推荐

使用location:stickly将元素固定到其父容器的顶部

如何在移动屏幕尺寸上包装元素?

Vue3日期 Select 器:禁用向左和向右箭头

VueJS CSS动画不会扩展到v-card/v-col之外

同时实现渐变文本和闪光文本效果是否可行?

当值小于 1 时理解 flex-shrink

Flex & space-around 与内容相交

用户代理必须处理(或表现得好像他们这样做)每个链接就好像链接指向单独的样式表这句话是什么意思?

网格在行方向上的大小不正确

用于替代渲染的 CSS 嵌套

在revealjs/Quarto中定义一类反背景的幻灯片

带填充的水平边框

zoom 时闪烁的背景滤镜模糊

在 CSS 中相对于另一个元素定位一个元素

边框半径 + 背景 colored颜色 == 裁剪边框

如何填充 100% 的剩余高度?

CSSzoom 高度以匹配宽度 - 可能与外形尺寸

如何防止内联块 div 换行?

将样式应用于第一行的单元格

从 textarea 中删除所有样式(边框、发光)