如何使两个具有不同文字长度的按钮具有相同的宽度？

Question

这里，我正在使用vuetifyjs创建按钮，并且将按钮的尺寸设置得很大。我可以看到按钮大小的变化，但我只能看到我所有按钮的大小都不同。我希望所有按钮的高度和宽度都相同，所有按钮的大小均相同。请任何人帮助我。

这是我的代码：

<template>

<div class="text-center">
    <v-btn 
       dark large
       min-width: 0;
      class="ma-2"

      color="red"
    >
      Red
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="pink"

    >
      Pink
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="purple"

    >
      Purple
    </v-btn>

       <v-btn
       dark large
      class="ma-2"

      color="light-blue"

    >
      Light-Blue
    </v-btn>

    <v-btn
    dark large
      class="ma-2"

      color="brown"

    >
      Brown
    </v-btn> <br/>

    <v-btn
    dark large
      class="ma-2"

      color="orange"

    >
      Orange
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="green"

    >
      Green
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="teal"

    >
      Teal
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="yellow"

    >
      Yellow
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="cyan"

    >
      Cyan
    </v-btn><br/>

        <v-btn
        dark large
      class="ma-2"

      color="amber"

    >
      Amber
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="lime"

    >
      Lime
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="grey"

    >
      Grey
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="blue-grey"

    >
      Blue-Grey
    </v-btn>


 <v-btn     
 dark large

class="ma-2 white--text"
  color="black"
  >

  Black
</v-btn>


</div>


</template> 

Answer 1

您可以使用样式设置按钮的宽度，但是，还需要设置标签槽的宽度，以使其完全适合按钮。我为按钮设置了宽度，也为容纳按钮文本的跨度设置了宽度EG：

<v-btn dark large color="red" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Red</span>
</v-btn>
<v-btn dark large color="pink" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Pink</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="light-blue" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Light Blue</span>
</v-btn>
<v-btn dark large color="brown" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Brown</span>
</v-btn>
<v-btn dark large color="orange" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Orange</span>
</v-btn>
<v-btn dark large color="green" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Green</span>
</v-btn>
<v-btn dark large color="teal" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Teal</span>
</v-btn>
<v-btn dark large color="yellow" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Yellow</span>
</v-btn>
<v-btn dark large color="cyan" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Cyan</span>
</v-btn>
<v-btn dark large color="amber" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Amber</span>
</v-btn>
<v-btn dark large color="lime" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Lime</span>
</v-btn>
<v-btn dark large color="grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Grey</span>
</v-btn>
<v-btn dark large color="blue-grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Blue-Grey</span>
</v-btn>
<v-btn dark large color="black" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Black</span>
</v-btn>