时间戳

首页 > 解决方案 > 将单选按钮的标签移动到单选按钮上方

html - 将单选按钮的标签移动到单选按钮上方

问题描述

所以我有一个带有标签的单选按钮。问题是标签和按钮在同一行（行）。我希望我的按钮位于标签下方！这是我的代码：

<v-radio-group row v-model="voltage" @click="consoles" label="SELECT 
VOLTAGE:">
              <v-radio
                v-for="n in radioNames"
                :key="n"
                :label="n"
                :value="n"
              ></v-radio>
              </v-radio-group>
              <v-radio-group row v-model="dependency">

它目前看起来像这样：在此处输入图像描述

如您所见，标签和按钮位于同一行。如何将标签移到按钮上方（左上角。就像“S”应该正好放在左按钮的顶部）？

标签： htmlcssvue.jsradio-buttonvuetify.js

解决方案

用于p标签

据我从Vuetify API看到的，没有设置labelascolumn和v-radioas 行的选项。一个简单的解决方案是将标签作为单独的元素添加v-radio-group：

<p>SELECT VOLTAGE:</p>
<v-radio-group row v-model="voltage" @click="consoles">
  <v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-radio-group>

使用v-layout

基于@SnakeyHips的回答，有一种简单的方法可以v-radio连续设置元素。使用 a<v-layout align-start row>仅将radio按钮包装在一行中：

<v-radio-group label="SELECT VOLTAGE:" v-model="row">
  <v-layout align-start row>
   <v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
  </v-layout>
</v-radio-group>

这是两种解决方案的示例。

推荐阅读