以定制的Vutify文本字段为例

(Playground)

<template>
  <v-app>
    <v-container>
      <v-text-field
        label="label goes here"
        variant="plain"
        density="compact"
        hide-details="auto"
        color="primary"
        class="my-1"
        model-value="some text goes here"
      />
    </v-container>
  </v-app>
</template>

<style scoped>
  :deep(.v-input),
  :deep(.v-field),
  :deep(.v-label--clickable) {
    font-size: 12px;
  }

  :deep(.v-label.v-field-label) {
    font-size: 10px;
  }
</style>

标签和内容之间的垂直间距太大

enter image description here

降低空间的最好方法是什么?我试着加了

  .v-input {
    height: 4px;
    min-height: 4px;
    max-height: 4px;
  }

  .v-field {
    height: 4px;
    min-height: 4px;
    max-height: 4px;
  }

  .v-text-field {
    height: 4px;
    min-height: 4px;
    max-height: 4px;
  }

想看看会发生什么,但什么都没有改变.

推荐答案

标签在Y轴上移动.当遇到这样的问题时,请始终使用浏览器开发工具来识别您不理解其位置的元素,以找出"它为什么在那里".寻找不相关的设置和修改,这些设置和修改在调整时会产生所需的结果.

影响元件位置的因素:

  • 通常为position,带有topbottomleftright(相对于另一个元素的位置变化)
  • marginpaddingborder(开发人员工具指出了这些)
  • 较不常见的是转换(translateX()translateY()translateZ())

解决方案(标签变换过高)

.v-field--variant-plain .v-label.v-field-label--floating {
  transform: translate(0px);
}

Vuetify Playground

enter image description here

Html相关问答推荐

如何找到FontAwese图标的Unicode值?

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

未显示新组件的视图

Angular 分量被循环

页脚与主要内容重叠

这<;td&>如何溢出<;表>;?

如何翻转卡片图像的背面

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

与窗高匹配的响应式正方形网格

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释?

当多个a元素用作目标时的:target伪类

如何影响 HTML 元素的哪些子元素导致其增长,哪些不增长?

为什么即使我点击其他地方,我的 contenteditable="true" 也会被激活?

如何使用html css将图像显示为附加形状

如何使 Shiny 中的 selectInput Select 扩展到井面板之外或以其他方式使它们更容易被用户看到?

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示?

另一个 flex 元素之间的 CSS 空间

如何向上移动图像并溢出图像的一部分而另一部分不溢出

水平滚动框不显示所有元素

无法使用 Reactjs 多次更新本地存储