Vue Formkit如何将标签放置在输入框旁？

下面提供几种可行的实现方式，按需选择：

1. 使用内置属性（最简便） #

直接给Formkit组件添加label-position属性控制标签位置，搭配label-width可自定义标签宽度：

<FormKit
  type="text"
  label="用户名"
  label-position="left"
  label-width="120px"
/>

• label-position可选值：left/right/top/bottom，设置为left即可让标签居左并与输入框同行
• label-width用于固定标签宽度，避免不同长度的标签导致布局错乱

2. 自定义CSS类（灵活适配需求） #

如果内置属性无法满足自定义样式需求，可添加自定义类并编写CSS：

<FormKit
  type="text"
  label="用户名"
  class="formkit-inline-item"
/>

对应的CSS代码：

.formkit-inline-item .formkit-label {
  display: inline-block;
  margin-right: 8px;
  /* 根据需求调整宽度 */
  width: 120px;
  text-align: right;
}
.formkit-inline-item .formkit-input-wrap {
  display: inline-block;
  /* 可设置输入框宽度占比，比如 */
  width: calc(100% - 130px);
}

3. 全局配置（统一所有表单样式） #

如果需要项目中所有Formkit表单都采用同行布局，可通过全局配置设置默认类名，再统一编写CSS：

import { createApp } from 'vue'
import { plugin, defaultConfig } from '@formkit/vue'

createApp(App)
  .use(plugin, defaultConfig({
    config: {
      classes: {
        global: {
          label: 'inline-label',
          inputWrap: 'inline-input-wrap'
        }
      }
    }
  }))
  .mount('#app')

全局CSS：

.inline-label {
  display: inline-block;
  margin-right: 8px;
  width: 120px;
}
.inline-input-wrap {
  display: inline-block;
}

注：不同Formkit版本的属性名或类名可能略有差异，若上述代码不生效，可检查对应版本的官方文档调整细节。

内容的提问来源于stack exchange，提问作者SilviaAut