如何给离子按钮提供相等的宽度

Question

嗨，我是Ionic应用程序开发的新手我现在正在学习离子UI组件，我们如何适应宽度相等的按钮我的代码可以帮助我

码

<ion-content padding>
<div>
  <button outline ion-button color="secondary" (click)="save()">Save</button> 
  <button outline ion-button color="secondary" (click)="Edit()">Edit</button>
  <button outline ion-button color="secondary"(click)="Update()">Update</button>
<div>

</ion-content>

Answer 1

你可以使用离子网格。如果没有提供特定的列宽，则根据行中元素的数量取宽度。这就是你要找的东西。

<ion-grid>
    <ion-row>
        <ion-col>
           <button outline ion-button color="secondary" (click)="save()">Save</button> 
        </ion-col>
        <ion-col>
           <button outline ion-button color="secondary" (click)="Edit()">Edit</button>
        </ion-col>
        <ion-col>
           <button outline ion-button color="secondary"(click)="Update()">Update</button>
        </ion-col>
    </ion-row>
</ion-grid>

您可以在此处找到更多信息。 https://ionicframework.com/docs/components/#grid

Answer 2

<ion-content padding>
<div>
  <button outline style="width:100px" ion-button color="secondary" (click)="save()">Save</button> 
  <button outline style="width:100px" ion-button color="secondary" (click)="Edit()">Edit</button>
  <button outline style="width:100px" ion-button color="secondary"(click)="Update()">Update</button>
<div>

</ion-content>