html - ionic 内容未正确对齐

Question

我有 3 个按钮(注意:我已经尝试过对其他元素(如 3 个文本/标签/等)进行相同的操作)

第一个按钮应位于开始位置(屏幕最左侧)，

第二个按钮应位于屏幕中间

第三个按钮应该位于末尾(屏幕的最右侧)

我尝试使用class=“ion-justify-content- Between”，但问题仍然相同。

这是屏幕截图:

这是我的代码:

<ion-card>
  <ion-card-content>
    <ion-item>
      <ion-grid>
        <ion-row class="ion-justify-content-between">
          <ion-col >
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
          <ion-col >
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-card-content>
</ion-card>

[注意:您也可以尝试不使用 ion-card/ion-card-content/ion-item。我的意思是你可以保留 ionic 网格，问题是一样的]

有人请告诉我出了什么问题吗？

Answer 1

最简单的方法是使用 flex。

#container{
display:flex;
justify-content:space-between;
}

<div id='container'>
              <ion-button>ok</ion-button>
           
              <ion-button>ok</ion-button>
            
              <ion-button>ok</ion-button>
</div>