更改同一组中两个单选按钮之间的间距

Question

是否可以更改两个水平单选按钮之间的间距？两个按钮都在同一个组中，我想将右边的按钮（“清除选择”）向右移动，以便与下面另一组中的按钮匹配。

                <v-radio-group v-model="consent.newselection2"
                row
                   >
                  <v-radio
                   class="radio"
                    color="yellow"
                    v-for="item in conclusionnewitems2"
                    :rules="rules"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  ></v-radio>
                </v-radio-group>

conclusionnewitems2: [
       { label: "Website", value: {'var1':"On our website", 'var2': "included on our website"}},
       { label: "Clear slelection", value: "null"},
],

Answer 1

看起来您正在使用像 Vuetify（或类似的东西）这样的框架，但只要它不会覆盖您的样式，您就可以使用一个类和一些 CSS：

<template>
  <v-radio class="radio padding-left" .../>
</template>

<style>
.padding-left {
  padding-left: 4px; // or however much you want
}
</style>

...或者使用简单的样式属性：

<template>
  <v-radio style="padding-left: 4px;" .../>
</template>

---

编辑：只移动一个（例如 2 号）： 我喜欢在循环中使用索引，并像这样添加一个动态类：

<template>
  <v-radio 
    v-for="(item, idx) in conclusionnewitems2"
    class="radio"
    :class="idx === 1 ? 'padding-left' : ''" 
    ...
  />
</template>

这意味着只有第二个 (idx == 1) 会有 padding-left。