如何对el-form表单的每一项的lablel文本设置两端对齐
时间: 2024-11-09 22:19:36 浏览: 35
在Ant Design Vue的`el-form`组件中,如果你想要让表单每一项的`label`标签文本两端对齐,可以利用CSS来实现。你可以给`.form-item-label`这个类添加`text-align: -webkit-center;`或者`text-align: center;`样式,使其内容居中显示。这里是一个简单的示例:
```html
<template>
<el-form :inline="true">
<el-form-item label="字段一">
<el-input v-model="fieldOne"></el-input>
</el-form-item>
<el-form-item label="字段二">
<el-input v-model="fieldTwo"></el-input>
</el-form-item>
</el-form>
</template>
<style scoped>
.form-item-label {
text-align: -webkit-center; /* 或者 text-align: center; */
}
</style>
<script setup>
import { ref } from 'vue';
const fieldOne = ref('');
const fieldTwo = ref('');
</script>
```
如果你希望所有的`label`都统一设置,可以在全局样式表文件(如`global.css`或`styles.scss`等)中添加该样式。
阅读全文