离子含量未正确对齐答案

【问题标题】：Ionic contents are not aligning properly离子含量未正确对齐
【发布时间】：2020-11-01 22:19:36
【问题描述】：

我有 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。我的意思是你可以只保留离子网格，问题是一样的]

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

【问题讨论】：

标签： html css ionic-framework ionic2

【解决方案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>

【讨论】：

作为 html+css 你的代码没问题，但在 ionic 中它没有成功。现在所有按钮都在左边

【解决方案2】：

https://forum.ionicframework.com/t/ionic-contents-are-not-aligning-properly/192655

来自 ionic 论坛的Rapropos 回答了我这个问题。上面的链接。如果你去那里，请不要忘记查看我的评论回复，我在他回答后做了进一步的修复。谢谢他。

所以这里是 .html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-item>
              <ion-input type="text" placeholder="User Name / Email" [(ngModel)]="id"></ion-input>
            </ion-item>
            <ion-item>
              <ion-input type="password" placeholder="Password" [(ngModel)]="password"></ion-input>
            </ion-item>
            <ion-item>
              <ion-checkbox color="secondary" checked slot="start"></ion-checkbox>
              <ion-label class="ion-margin-left">Remember me</ion-label>
            </ion-item>
            
              <div class="outerbox ion-margin-vertical">
                <ion-button color="tertiary" size="small" (click)="forwardToNextPage1()">Sign Up</ion-button>
                <ion-button color="primary" size="small" (click)="GetALogin()">Login</ion-button>
                <ion-button color="secondary" size="small" (click)="forwardToNextPage2()">Forgot Password?</ion-button>
              </div>

         
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

这里是 .css

.outerbox {
  display: flex;
  justify-content: space-between;
}

非常重要的一点：

不要将 div 放在 ion-item 中。如果你这样做，所有按钮都会像这样向左移动

单独使用div。不要让其他任何事情影响它。

【讨论】：

【解决方案3】：

只需在ion-col 中添加离子实用程序类它按预期工作。

<ion-grid>
    <ion-row class="ion-justify-content-between">
      <ion-col class="ion-text-start">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-center">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-end">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

【讨论】：