英文:
How to lower space between label and field for Vuetify input controls?
问题
以下是已翻译的内容：
给定一个自定义的 Vuetify 文本字段示例
<template>
<v-app>
<v-container>
<v-text-field
label="标签在这里"
variant="plain"
density="compact"
hide-details="auto"
color="primary"
class="my-1"
model-value="这里放一些文本"
/>
</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>
标签和内容之间的垂直间距太大。
降低间距的最佳方法是什么？我尝试添加以下样式：
.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;
}
但没有任何变化。
英文:
Given a customized Vuetify textfield as an example
<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>
The vertical space between the label and the content is too much
What is the best way to lower the space? I tried to add
.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;
}
to see what happens but nothing changed.
答案1
得分: 1
标签在Y轴上偏移。在遇到这种问题时，始终使用浏览器开发者工具来识别您不理解其位置的元素，找出"为什么它在那里"。查找不相关的设置和修改，调整它们将产生所需的结果。
影响元素位置的因素：
- 通常是
position，带有top、bottom、left、right（相对于另一个元素的位置变化） margin、padding、border（开发者工具指示这些）- 较少频繁的是变换（
translateX()、translateY()、translateZ()）
解决方案（标签变换过高）：
.v-field--variant-plain .v-label.v-field-label--floating {
transform: translate(0px);
}
英文:
The label is shifted on the Y-axis. When encountering such an issue, always use browser developer tools to identify the element whose position you don't understand, to find out "why it is there." Look for irrelevant settings and modifications that, when adjusted, will yield the desired result.
Factors influencing element position:
- generally
position, withtop,bottom,left,right(position changes relative to another element) margin,padding,border(developer tools indicate these)- less frequently, transformations (
translateX(),translateY(),translateZ())
Solution (label transform too high)
.v-field--variant-plain .v-label.v-field-label--floating {
transform: translate(0px);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论