如何将 2 个按钮组件组合成一行？答案

【问题标题】：How to make 2 button component into one single row?如何将 2 个按钮组件组合成一行？
【发布时间】：2021-07-20 03:49:58
【问题描述】：

我有 2 个按钮组件，我希望它们在一行中

代码：

<template v-slot:[`item.action`]="{ item }">
   <v-btn depressed @click="view(item.book)" color="primary">View</v-btn>
   <v-btn depressed @click="viewUpdate(item.book,item.id_book)" color="primary">Update</v-btn>
</template>

那么如何将它们排成一行呢？

【问题讨论】：

是你希望单排的按钮和单排的组件吗？
我的意思是，只是 View 和 Update 的按钮成单行，img 是 2 按钮，但每个按钮分成 2 行

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

您可以使用 CSS flex-box 功能：

.flex {
    display: flex;
}

<div class="flex">
    <button>Button 1</button>
    <button> Button 2</button>
</div>

【讨论】：

【解决方案2】：

我想通了，这里是代码：

<template v-slot:[`item.action`]="{ item }" >
  <v-container grid-list-sm>
    <v-layout row justify-space-around>
      <v-flex md3>
        <v-btn depressed @click="view(item.book)" color="primary">View</v-btn>
      </v-flex>
      <v-flex md3>
        <v-btn depressed @click="viewUpdate(item.book,item.id_book)" color="primary">Update</v-btn> 
      </v-flex>
    </v-layout>
  </v-container>
</template>

【讨论】：